Vue.filter is not calling while HTML rendering - vue.js

Question

I am new to Vue.js
While rendering the html, I am invoking a Vue.filter. It should show a date in another format.
Below is my js file :
var details = new Vue({
el: '#ajax-article-detail',
data: {
message: 'Hello Vue.js!'
},
methods: {
showName: function() {
console.log('Calling showName...');
return 'Im Event';
}
}
});
Vue.filter('parseDate', function(date, format) {
if (date) {
//console.log(moment(String(date)).format(format));
return moment(String(date)).format(format);
}
});
and in html, I am calling like {{${start_date} | parseDate('ddd, Do MMM YYYY')}}
and as a response, I am getting same statement.
means, I am getting {{${start_date} | parseDate('ddd, Do MMM YYYY')}} as it is in html.
Can anyone please suggest what I did wrong ?
Thank you.

Answer 1

I have changed your code by adding the filter property within the Vue component creation.
var details = new Vue({
el: '#ajax-article-detail',
data: {
message: 'Hello Vue.js!'
},
methods: {
showName: function() {
console.log('Calling showName...');
return 'Im Event';
}
},
filters: {
parseDate: function(date, format) {
console.log('value passed: ' + date); //check the browser console if it is passed
if (date) {
//console.log(moment(String(date)).format(format));
return moment(String(date)).format(format);
}
}
});
Then use the filter like this-
{{2018-12-19 16:46:00 | parseDate('<your_date_format>') }}
However, you need to check if you are passing the value correctly. Try passing some hard coded string value first and check the console window.