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

Posted 2023-02-22

【中文标题】在 Vue JS 中，从 vue 实例中的方法调用过滤器，但 $options 未定义

【英文标题】：In Vue JS, call a filter from a method inside the vue instance but $options is undefined

【发布时间】：2018-12-31 18:03:52

【问题描述】：

我已经看到了适合我的问题的答案：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"

【问题讨论】：

我想可能是你的箭头函数！换个style: function(input)

怎么样

你说的很对，最后弄明白了，谢谢！

【参考方案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 

【讨论】：

第一部分是正确的答案，即使第二种编码方式也有意义谢谢！

【参考方案2】：

你可以在方法中编写这个函数

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