Vue js áp dụng bộ lọc trên v-model trong trường nhập

Question

Hy vọng ai đó có thể giúp tôi! Tôi đã thực hiện một chỉ thị gói Jasny Bootstrap Plugin cụ thể hơn là điều đầu vào mặt nạ và tất cả mọi thứ diễn ra tốt đẹp!

Bây giờ tôi đã tạo bộ lọc tùy chỉnh được hỗ trợ theo thời điểm để định dạng trường ngày!

Định dạng ngày mà tôi nhận được từ ứng dụng phụ trợ của tôi là YYY-MM-DD và tôi phải hiển thị trên chế độ xem là DD/MM/YYYY ... Tôi đã thử v-model="date | myDate" nhưng định dạng này không hoạt động đúng cách!

JS

Vue.directive('input-mask', { 
    params: ['mask'], 

    bind: function() { 
    $(this.el).inputmask({ 
     mask: this.params.mask 
    }); 

    }, 
}); 

Vue.filter('my-date', function(value, formatString) { 

    if (value != undefined) 
    return ''; 

    if (formatString != undefined) 
    return moment(value).format(formatString); 

    return moment(value).format('DD/MM/YYYY'); 

}); 

var vm = new Vue({ 
    el: 'body', 
    data: { 
    date: '2015-06-26', 
    } 
}); 

HTML

<label>Date</label> 
<input type="text" class="form-control" v-input-mask mask="99/99/9999" v-model="date"> 
<p>{{ date | myDate 'dd/mm/yyyy' }}</p> 

Có là JSBin nếu ai đó là quan tâm!

Cảm ơn trước!

EDIT: Giải thích rõ hơn những gì tôi mong đợi =)

Khi trang web đầu tiên nạp đầu vào nhận được giá trị của 2015/06/26 và tôi muốn chứng minh rằng giá trị như DD/MM/YYYY nên 26/06/2015! Nó hoạt động đúng chỉ sau khi tôi bắt đầu gõ một cái gì đó!

Answer 1

Tôi hiểu những gì bạn đang cố gắng làm, tuy nhiên, do ràng buộc hai chiều khi sử dụng mô hình v, có thể tốt hơn là chỉ định dạng ngày khi bạn nhận được từ máy chủ và sau đó sử dụng nó với định dạng mong muốn trong ứng dụng front-end của bạn ('DD/MM/YYYY').

Khi gửi dữ liệu về phía sau, bạn chỉ cần định dạng lại thành định dạng máy chủ mong muốn ('YYYY-MM-DD').

Trong ứng dụng Vue của bạn, dòng chảy công việc sẽ là một cái gì đó như thế này:

new Vue({ 
    el: 'body', 
    data: { 
     date: null, 
    }, 
    methods: { 
     getDataFromServer: function() { 
       //ajaxCall to get data from server 

       //let's pretend the received date data was saved in a variable (serverDate) 
       //let's hardcode for this ex. 
       var serverDate = '2015-06-26'; 

       //format it and save to vue data property 
       this.date = this.frontEndDateFormat(serverDate); 
     }, 
     saveDataToServer: function() { 
      //format data first before sending it back to server 
      var serverDate = this.backEndDateFormat(this.date); 

      //ajax call sending formatted data (serverDate) 
     }, 
     frontEndDateFormat: function(date) { 
      return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY'); 
     }, 
     backEndDateFormat: function(date) { 
      return moment(date, 'DD/MM/YYYY').format('YYYY-MM-DD'); 
     } 

    } 

    }); 

này hoạt động tốt đối với tôi, hy vọng nó sẽ giúp.

Đây là một fiddle cho nó:

https://jsfiddle.net/crabbly/xoLwkog9/

Answer 2

Khi bạn nhận được giá trị ban đầu, hãy điều chỉnh giá trị để phù hợp với đầu vào. Tôi đã làm việc trong ready chức năng, nhưng bạn có thể làm được điều này sau khi cuộc gọi DB của bạn cũng như:

ready: function(){  
    var year = this.date.substr(0, 4); 
    var monDay = this.date.substr(5,5); 
    var result = monDay + "-" + year; 
    this.date = result.replace(/-/g,"/"); 
} 

Bạn có thể phải làm một cái gì đó tương tự trên đường về đến cơ sở dữ liệu của bạn là tốt.

Answer 3

Tôi đã có một vấn đề tương tự khi tôi muốn chữ hoa một giá trị đầu vào.

Đây là những gì tôi đã kết thúc thực hiện:

// create a directive to transform the model value 
Vue.directive('uppercase', { 
    twoWay: true, // this transformation applies back to the vm 
    bind: function() { 
    this.handler = function() { 
     this.set(this.el.value.toUpperCase()); 
    }.bind(this); 
    this.el.addEventListener('input', this.handler); 
    }, 
    unbind: function() { 
    this.el.removeEventListener('input', this.handler); 
    } 
}); 

Sau đó, tôi có thể sử dụng chỉ thị này trên các lĩnh vực đầu vào với một v-model.

<input type="text" v-model="someData" v-uppercase="someData"> 

Bây giờ, bất cứ khi nào tôi nhập vào trường này hoặc thay đổi someData, giá trị được chuyển thành chữ hoa.

Điều này về cơ bản đã làm tương tự như tôi hy vọng v-model="someData | uppercase" sẽ thực hiện. Nhưng tất nhiên, bạn không thể làm điều đó.

Tóm tắt: thực hiện chỉ thị biến đổi dữ liệu, chứ không phải bộ lọc.