我对 vue 中的计算属性感到非常困惑，因为它将数据应用于计算属性而不是渲染？

Posted 2023-02-23

【中文标题】我对 vue 中的计算属性感到非常困惑，因为它将数据应用于计算属性而不是渲染？

【英文标题】：I am very much confused with computed property in vue as it is applying the data to computed property but not rendering?

【发布时间】：2018-04-17 02:39:58

【问题描述】：

        computed: 
        filteredQuestions: function () 
            return this.allquestions.filter((question) => 
                return question.question.match(this.search)
            )
        
    ,

我有上面的计算属性，我正在通过以下方式在创建的方法中获取数据：

        created() 
        axios.get('/teacher/quiz/questions')
            .then((response) => 
                console.log(response.data);
                this.allquestions = response.data;

            )
            .catch(function (error) 
                console.log(error);
            );
    ,

我已经在我的数据方法中声明了所有问题和搜索。 安装后数据不显示。

但同时它会显示在 vue 检查工具中。 因此我对此感到困惑。幕后究竟发生了什么？

【参考方案1】：

axios.get 是异步操作。 因此，当程序第一次运行时，this.allquestions 实际上仍然是undefined，并且您的计算方法失败了。

我会在 data 属性上预先声明 allquestions 为空数组。

查看代码：

<script>
export default 
  data() 
    return 
      allquestions: []
    
  ,
  computed: 
    filteredQuestions: function() 
      return this.allquestions.filter(question => 
        return question.question.match(this.search)
      )
    
  ,
  created() 
    axios
      .get('/teacher/quiz/questions')
      .then(response => 
        console.log(response.data)
        this.allquestions = response.data
      )
      .catch(function(error) 
        console.log(error)
      )
  

</script>

【讨论】：

非常感谢。我理解错误，因为这是我的愚蠢错误。我已经声明了 allquestions，但是作为一个对象，比如 allquestions: in data 并且在将 ut 更改为 array 之后问题就解决了。