Question

我已经看到了适合我的问题的答案：In Vue JS, call a filter from a method inside the vue instance

现在，当做

时，不用担心了

console.log(this.$options)

我收到undefined，所以无法在其上拨打filters。这是我的代码：

 methods:{
    style:(input)=>{
      return {
        backgroundColor:this.$options.filters.color(input),
      }
    }
  },
  filters: {
    color: function (value) {
      console.log(color(value));
      if (!value) return ''
      return `rgb(${value},${value},${value})`
    }
  }

Error in render: "TypeError: Cannot read property 'filters' of undefined"

Answer 1

您正在将箭头功能用于样式方法。应该是：

style(input) {
    return {
        backgroundColor:this.$options.filters.color(input),
    }
}

如果您不在过滤器中使用this，则可以将其提取到外部，例如：

function color (value) {
    console.log(color(value));
    if (!value) return ''
    return `rgb(${value},${value},${value})`
}

methods: {
    style(input) {
        return {
            backgroundColor: color(input),
        }
    }
},
filters: { color }

Answer 2

您可以在方法中编写此功能

methods:{
    style:(input)=>{
      return {
        backgroundColor:this.color(input),
      }
    },
    color: (value) {
      console.log(color(value));
      if (!value) return ''
        return `rgb(${value},${value},${value})`
      }
  }

在Vue JS中，从vue实例内部的方法调用过滤器，但$ options未定义

2 个答案: