Vue js apply filter on v-model in an input field

I understand what you are trying to do, however, because of the two way binding when using v-model, it may be better to just format the date as you receive it from the server, and then, use it with the desired format in your front-end app ('DD/MM/YYYY').

When sending the data back to the back-end, you just format it back to the desired server format ('YYYY-MM-DD').

In your Vue app, the work flow would be something like this:

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

This works well for me, hope it helps.

Here is a fiddle for it:

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

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

I had a similar problem when I wanted to uppercase an input value.

This is what I ended up doing:

// create a directive to transform the model valueVue.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);  }});

Then I can use this directive on the input field with a v-model.

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

Now, whenever I type into this field or change someData, the value is transformed to uppercase.

This essentially did the same thing as I hoped v-model="someData | uppercase" would do. But of course, you can't do that.

In summation: make a directive that transforms the data, not a filter.

Go to main.js and add the following code :

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

In your HTML do the following :

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

So we used above v-bind to bind the value and @input event handler to have the v-model functionality.