vue的计算属性的问题：当触发testClick方法后，页面没有开始新的渲染，该怎么触发以至于渲染?

Question

问题修改:

<span v-for="item in testComputed" :class="{active: item.flag}" @click="testClick(item)"></span>

        data: {
            testData: [{a:1},{b:1},{n:1},{d:1},]
        },
        computed: {
            testComputed: function(){
                return this.testData;
            }
        },
        methods: {
            testClick :function(item)  {
                this.testData.forEach(ele => {
                    ele.flag = false;
                });
                item.flag = true;
                
                //对数组操作，渲染
                this.testData.push('111');//没有这一步，这不会触发计算属性对应方法
            },
         }

在利用计算属性testComputed来渲染的前提下，当触发testClick方法后，testComputed是我想要的数据，页面没有开始新的渲染，请问该怎么触发以至于渲染?

Answer 1

计算属性就是通过其他数据的变化而变化, 而在你这里其他数据指的是this.testData, 所以你testClick()里面的逻辑应该是改变this.testData的值, 从而让计算属性自己跟着变化

Answer 2

能不能看好API，再来问计算属性默认只有 getter

Answer 3

计算属性的更改是在它依赖的data数据发生更改之后，对于你的代码里可以把 this.testComputed.push('111'); 改为 this.testData.push('111')。