Vue.js 计算属性不为'；不要插手，Vue js

我是usong 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>

计算：{
selectedZonesTest（）{
返回此项。$store.state.selectedZonesTest；
}
},
.......
选择区域：功能（ev）{
if（ev.target.className.baseVal！==null&&typeof ev.target.className.baseVal！==“未定义”）{
this.zoneId=ev.target.id
this.selectedZones.push（{boneId:this.boneId，zoneId:this.zoneId}）；
如果（this.selectedZonesTest.length==0）{
this.selectedZonesTest[this.boneId]=[this.zoneId]；
}否则{
for（此.selectedZonesTest中的变量i）{
if（this.getKeyExist（this.boneId）==true）{
if（this.zoneExists（this.zoneId）==true）{
//控制台日志（“1”）；
this.removeZone（this.zoneId）
}否则{
//控制台日志（“2”）；
this.selectedZonesTest[this.boneId].push（this.zoneId）；
}
}否则{
//控制台日志（“3”）；
this.selectedZonesTest[this.boneId]=[this.zoneId]；
}
}
}
}
console.log（this.selectedZonesTest）；
},
}
}
.cls-1{
填充：#fff；
}
.选定{
填充物：红色；
}

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

对于对象：

对于阵列：

假设

this.selectedZonesTest

是一个数组，则不能按如下索引设置值：

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

相反，您需要这样做：

Vue.set（this.selectedZonesTest，this.boneId，[this.zoneId]）；

或者您可以使用

拼接

方法：

this.selectedZonesTest.splice（this.boneId，1[this.zoneId]）；

---

这些是Vue 2检测更改的方式的限制。Vue 3将使用不同的更改检测技术来删除这些警告。

我怀疑以

this开头的行。selectedZonesTest[this.boneId]=

。他们似乎违反了反应性警告。

this.selectedZonesTest

是数组还是对象？同样奇怪的是，循环变量

i

没有在循环中使用。我创建了循环，但还没有使用它，对Vue.js来说还是很新的。基本上，我要尝试的是，当一个新项目被添加到该项目数组中时，我要尝试在UI上显示它。我会调查的，谢谢！我刚读到一些警告，这是有道理的。如果您想添加到现有阵列，我会这样做。$set（this.selectedZonesTest[this.boneId]，this.zoneId）？@bisamov当前您正在使用

push

添加到现有阵列，这应该可以正常工作。任何标准数组方法都应该可以工作。按索引设置值时，只需使用

$set

。e、 g.

this.$set（this.selectedZonesTest[this.bonesId]，index，this.zoneId）

。即使这样，您也可以使用

splice

，不过使用

$set

可能会更清楚一些。