Vue Filters For Input / V-Model

Question

So I am very new to ES6 SPA Javascript and Vue JS. I have mostly been using JQuery.

So I have a global filter,

Vue.filter('formatDate', function (value) {
  if (value) {
    return moment(String(value)).format('Do MMMM YYYY')
  }
})

I am also using Vuetify. I can use that filter with a data table, like so,

{{ props.item.DateAdded | formatDate }}

However, its not working for me on a v-model, I am guesting i doing something wrong?

 <v-flex xs12><v-text-field v-model="profileData.DateAdded | formatDate" label="Date Added"></v-text-field></v-flex>

I have also tried, v-bind:value as its the input value I want to format? No luck.

Please help?

Thanks,

Answer 1

According to documentaiton:

Filters are usable in two places: mustache interpolations and v-bind expressions (the latter supported in 2.1.0+)

So you can use v-bind. You said you tried but it doesn't work, however it works in this jsfiddle. I've also added @input event handler to have the v-model functionality.

So basically your text field component should be like this:

<v-text-field
  :value="profileData.DateAdded | formatDate"
  label="Date Added"
  @input="value => profileData.DateAdded = value"
></v-text-field>