呈现HTML时Vue.filter未调用

Question

我是Vue.js新手

在呈现html时，我调用了一个Vue.filter。它应该以另一种格式显示日期。

下面是我的js文件：

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

在超文本标记语言中，我像{{${start_date} | parseDate('ddd, Do MMM YYYY')}}一样调用

作为回应，我得到了同样的声明。意思是，我得到的是html格式的{{${start_date} | parseDate('ddd, Do MMM YYYY')}}。

有谁能建议我做错了什么吗？

谢谢。

Answer 1

我在Vue组件创建中添加了filter属性，从而更改了您的代码。

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

然后像这样使用过滤器-

{{2018-12-19 16:46:00 | parseDate('<your_date_format>') }}

但是，您需要检查是否正确传递了该值。尝试先传递一些硬编码的字符串值，然后检查控制台窗口。