Vue jsは入力フィールドのv-modelにフィルタを適用します

Question

誰かが私を助けることを望みます！ Jasny Bootstrap Pluginをより具体的に入力マスクのものに置き換えて、すべてがうまくいくように指示を出しました！

今、日付フィールドの書式を設定するカスタムフィルターを瞬時にサポートしました。

私のバックエンドアプリケーションから受け取る日付形式はYYY-MM-DDで、DD/MM/YYYYとして表示する必要があります... v-model="date | myDate"を試しましたが、正しく動作しませんでした。

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> 

誰かが興味を持っている場合JSBinがあります！

ありがとうございます！

EDIT：

ページは、第1の入力をロード2015年6月26日の値を受け取り、私はDD/MM/YYYYようにその値を表示したいと思い）私は=を期待するものより良い説明します2014年6月26日！それは私が何かをタイプすることを始めた後でのみ正しく働く！

Answer 1

しかし、v-modelを使用しているときに双方向バインディングが使用されているため、サーバーから受け取った日付を書式設定してから使用する方がよい場合があります。フロントエンドアプリで希望するフォーマット（'DD/MM/YYYY'）。

データをバックエンドに送信するときは、目的のサーバー形式（'YYYY-MM-DD'）にフォーマットし直します。これは私のためによく働く

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'); 
     } 

    } 

    }); 

、それが役に立てば幸い：あなたのVueのアプリで

は、作業の流れは、このようなものになるだろう。ここで

はそれのためのフィドルです：

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

Answer 2

最初に値を取得したら、入力に合わせて値を調整します。

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,"/"); 
} 

あなたが戻ってあなたのデータベースまで、同様の方法で同様の何かをしなければならないことがあります。私はそれがready機能で働いていますが、同様にあなたのDBのコールの後にこれを行うことができました。

Answer 3

私は入力値を大文字に望んでいたとき、私は同様の問題がありました。

これは私がやってしまったものです：

// 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); 
    } 
}); 

その後、私はv-modelと、入力フィールドに、このディレクティブを使用することができます。私は、このフィールドに入力するか、someDataを変更するたび

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

さて、値が大文字に変換されます。

これは本質的に私がv-model="someData | uppercase"がやりたいことと同じことをしました。もちろん、あなたはそれをすることはできません。

合計では、ではなく、データを変換するディレクティブを作成します。