计算属性不启动，Vue js

Question

我使用的是 Vue.js，并且我创建了一个计算属性，该属性存储在我的 vuex 中。出于某种原因，当我创建我的观察者并将项目添加到数组中时，观察者不会启动。虽然，当我控制台日志时，它肯定里面有项目

computed:{

            selectedZonesTest(){
              return this.$store.state.selectedZonesTest;
            }
        },
       .......
            selectZones: function(ev){
                if (ev.target.className.baseVal !== null && typeof ev.target.className.baseVal !== "undefined"){
                    this.zoneId = ev.target.id
                    this.selectedZones.push({boneId:this.boneId, zoneId: this.zoneId});

                    if(this.selectedZonesTest.length == 0){
                        this.selectedZonesTest[this.boneId] = [this.zoneId];
                    }else{
                        for(var i in this.selectedZonesTest){
                            if(this.getKeyExist(this.boneId) == true){
                                if(this.zoneExists(this.zoneId) === true){
                                    // console.log("1");
                                    this.removeZone(this.zoneId)
                                }else{
                                    // console.log("2");
                                    this.selectedZonesTest[this.boneId].push(this.zoneId);
                                }
                            }else{
                                // console.log("3");
                                this.selectedZonesTest[this.boneId] = [this.zoneId];
                            }
                        }
                    }
                }
                console.log(this.selectedZonesTest);
            },
        }
    }
</script>

<style>
 .cls-1{
     fill: #fff;
 }
 .selected{
     fill: red;
 }
</style>

Answer 1

看起来您只是在反应性警告方面遇到了问题。

对于对象：https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

对于数组：https://vuejs.org/v2/guide/list.html#Caveats

假设this.selectedZonesTest 是一个数组，您不能像这样按索引设置值：

this.selectedZonesTest[this.boneId] = [this.zoneId];

相反，您需要执行以下操作：

Vue.set(this.selectedZonesTest, this.boneId, [this.zoneId]);

或者你可以使用splice方法：

this.selectedZonesTest.splice(this.boneId, 1, [this.zoneId]);

这些是 Vue 2 检测更改方式的限制。 Vue 3 将使用一种不同的技术进行变更检测，从而消除这些警告。