Vue.js this 在计算属性中未定义

Posted 2023-02-22

【中文标题】Vue.js this 在计算属性中未定义

【英文标题】：Vue.js this is undefined inside computed property

【发布时间】：2019-03-18 18:23:22

【问题描述】：

我有以下带有模型selectedProp的输入标签：

<input type="text" v-model="selectedProp" />

我想遍历这样的项目：

<div v-for="item of filteredItems">item.prop</div> 

这是组件的脚本：

export default 
  name: 'App',
  data() 
    return 
      items: [],
      selectedProp: "",
      projects: [],
      errors: []
    
  ,
  created() 
   axios.get(`$URL`)
   .then(response => 
      // JSON responses are automatically parsed.
      this.items = response.data;
    )
    .catch(e => 
      this.errors.push(e)
    );

  ,

  computed: 
    filteredItems() 
      if(this.selectedProp) 
        console.log(this.selectedProp);
        return this.items.filter(function (item) 
          return item.prop == this.selectedProp;
        );

      
      return this.items;

    
  ,

错误

这是在计算属性中未定义的

【参考方案1】：

在这种情况下，您可以使用可以访问this 对象的箭头函数

 return this.items.filter( (item)=> 
      return item.prop == this.selectedProp;
    )