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 если кто-то заинтересован!

спасибо заранее!

EDIT: лучше объяснить, что я ожидаю =)

при первой загрузке страницы вход получает значение 2015-06-26, и я хотел бы показать это значение как DD/MM/YYYY так 26/06/2015! Он работает правильно только после того, как я начинаю печатать что-то!

13
date javascript jquery momentjs vue.js

3 ответов

Я понимаю, что вы пытаетесь сделать, однако, из-за двухсторонней привязки при использовании v-модели, может быть, лучше просто отформатировать дату, как вы ее получаете с сервера, а затем использовать ее с требуемым форматом в вашем интерфейсном приложении ('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')
        }
    }
  })
11

у меня была аналогичная проблема, когда я хотел ввести значение в верхнем регистре.

вот что я делал:

// 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" будет делать. Но, конечно, ты не можешь этого сделать.

подводя итог: сделать

7

когда вы получите значение изначально, отрегулируйте его, чтобы соответствовать входу. Я заставил его работать в 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