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将使用另一种技术来进行变更检测，从而消除这些警告。

Vue JS无法启动计算属性

1 个答案: