Vue js在输入字段中的v-模型上应用过滤器。

Question

希望有人能帮我！我已经做了一个指令包装贾斯尼引导插件，更具体的输入面具的事情，一切都进行得很好！

现在，我已经做了一个自定义过滤器支持的时刻格式的日期字段！

从我的后端应用程序收到的日期格式是YYY 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',
  }
});

<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！只有在我开始打字之后，它才能正常工作！

Answer 1

但是，我理解您要做的事情，但是，由于使用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/

语法更新：

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

Answer 2

当我想大写一个输入值时，我也遇到了类似的问题。

这就是我最后所做的：

// 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在输入字段上使用这个指令。

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

现在，每当我键入此字段或更改someData时，该值将转换为大写。

实际上，这与我希望v-model="someData | uppercase"会做的事情是一样的。但当然，你不能这么做。

求和:创建一个转换数据的指令，而不是过滤器。

Answer 3

转到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模型功能。