CODEWITHSUNDEEP
vue.jsvuetify.js
jacstrong
jacstrong

Reputation: 300

Vue filter with options

I'm trying to use one instance of a filter to be able to accept different formats. Not really sure what I'm missing. The first instance is working. The second one keeps giving an error (both of the second ones)

=== main.js ===
Vue.filter('formatDate', function (value, config) {
  console.log('test');
  if (config === 'time') {
    return format(value, 'YYYY/MM/DD hh:mm');
  } else {
    return format(value, 'YYYY/MM/DD');
  }
});

=== Page.vue ===
-- first instance -- <p> {{ item.date | formatDate }} </p>

-- second instance -- <p> {{ item.date | formatDate 'time' }} </p>
-- also second instance -- <p> {{ item.date | formatDate, 'time' }} </p>

Upvotes: 1

Views: 638

Answers (2)

akuiper
akuiper

Reputation: 214957

Pass time as a parameter to formatDate filter, so the syntax should be item.date | formatDate('time'). see Vue filters.

Vue.filter('formatDate', function (value, config) {
  if (config === 'time') {
    return 'with time';
  } else {
    return 'default';
  }
});

new Vue({
  el: '#app',
  data: {
    item: {
      date: new Date()
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>

<div id='app'>
  <p> {{ item.date | formatDate('time') }} </p>
</div>

Upvotes: 0

Thomas
Thomas

Reputation: 561

You should use

{{ item.date | formatDate('time') }}

as described in the Vue.js doc about filters : https://v2.vuejs.org/v2/guide/filters.html

Upvotes: 1

Related Questions