vue.js - 将 v-bind 与过滤器结合使用时如何保持反应性

Question

我有以下输入框，它是从对象正确填充的

<input type="text" :value="value.delayed_till | dateFilter" readonly>

应用以下过滤器：

filters: {
    dateFilter: function (value) {
      const months = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
      ]
      let seconds = new Date(value.seconds * 1000)
      let year = seconds.getFullYear()
      let month = months[seconds.getMonth()]
      let day = seconds.getDate()
      let hour = seconds.getHours()
      let min = seconds.getMinutes()
      return day + ' ' + month + ' ' + year + ' ' + (hour < 10 ? '0' : '') + hour + ':' + (min < 10 ? '0' : '') + min
    }
  }

但是，当输入框的值更新时，相应的对象（从中获取值）不会改变。

对于我的所有其他输入框，我使用 v-model ，它会在输入框的值更改时更新对象

Vue文档建议使用 v-bind 但这给了我一个错误：

<input type="text" v-bind="value.delayed_till | dateFilter" readonly>

[Vue 警告]：属性或方法“dateFilter”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

标签： vue.js