web-dev-qa-db-ja.com

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

誰かが私を助けてくれることを願っています！ Jasny Bootstrapプラグイン、より具体的には入力マスクのことをラッピングするディレクティブを作成しましたが、すべてうまくいきます！

これで、日付フィールドをフォーマットするために瞬間的にサポートされるカスタムフィルターを作成しました！

バックエンドアプリケーションから受け取る日付形式は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 があります！

前もって感謝します！

編集：私が期待するものをより良く説明する=）

ページが最初に読み込まれると、入力が2015-06-26の値を受け取り、その値をDD/MM/YYYYとして表示したいので、26/06/2015！何かを入力し始めて初めて正常に動作します！

javascriptjquerydatemomentjsvue.js
17
Gustavo Bissolli

私はあなたがやろうとしていることを理解していますが、v-modelを使用するときは双方向のバインドのため、サーバーから受信した日付をフォーマットしてから、フロントエンドアプリ（'DD/MM/YYYY'）。

データをバックエンドに送り返すときは、目的のサーバー形式（'YYYY-MM-DD'）。

Vueアプリでは、ワークフローは次のようになります。

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

                // Let's pretend the received date data was saved in a variable (serverDate)
                // We will hardcode it 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');
        }
    }
  });

これは私にとってうまく機能します。

以下がそのためのフィドルです。

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

構文UPDATE：

    ...
    methods: {
        getDataFromServer() {
                // Ajax call to get data from server

                // Let's pretend the received date data was saved in a variable (serverDate)
                // We will hardcode it for this ex.
                const serverDate = '2015-06-26'

                // Format it and save to vue data property
                this.date = this.frontEndDateFormat(serverDate)
        },
        saveDataToServer() {
            // Format data first before sending it back to server
            const serverDate = this.backEndDateFormat(this.date)

            // Ajax call sending formatted data (serverDate)
        },
        frontEndDateFormat(date) {
            return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY')
        },
        backEndDateFormat(date) {
            return moment(date, 'DD/MM/YYYY').format('YYYY-MM-DD')
        }
    }
  })
13
crabbly

最初に値を取得したら、入力に合うように調整します。 ready関数で動作するようになりましたが、DB呼び出しの後にこれを行うこともできます。

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

データベースに戻る途中で、同様のことをする必要があるかもしれません。

2
Jeff

これは、監視コールバックを使用してv-modelにvueフィルターを実装した方法で、ロード時に値を更新しません。

Vue.filter('uppercase', function (value) {
    return value.toUpperCase();
});

Html：

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

監視コールバック：

watch:{
   someData(val) {
       this.someData = this.$options.filters.uppercase(val);
    },
}
2
krchun

Main.jsに移動して、次のコードを追加します。

import moment from 'moment'
Vue.filter('myDate', function (value) {
    if (value) {
        return moment(String(value)).format('dd/mm/yyyy')
    }
});

HTMLで次を実行します。

<label>Date</label>
<v-text-field :value="date | myDate" @input="value=>date=value"></v-text-field>
<p>{{ date | myDate 'dd/mm/yyyy' }}</p>

そのため、上記のv-bindを使用して値と@inputイベントハンドラーをバインドし、v-model機能を持たせました。

0
Samidjo