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

在html中，我像{{${start_date} | parseDate('ddd, Do MMM YYYY')}}

作为回应，我得到了同样的声明。表示，我得到的是{{${start_date} | parseDate('ddd, Do MMM YYYY')}}，就像在HTML中一样。

任何人都可以提出我做错了什么吗？

谢谢。

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

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

HTML呈现时Vue.filter没有调用

1 个答案: