我正在使用Vueitfy的v-chip组件，在点击十字图标时隐藏/显示芯片。文档指出要添加布尔值v-ifdata() { return { chips:{}, tests: [], tabs: ["Parameters", "Start Time", "Trafic Source"], disabledButtons: true, };},这里的chips对象是我需要动态化的。为此，我将动态生成的名称推送到芯片对象中：mounted() { this.tests = this.$store.state.run.runScheduled; //adding dynamic chip into chips array which will be used to hide/show individual chips for (let test in this.tests) { let chipName="Chip"+test; this.chips[chipName]=true; }}对 HTML 标记做同样的事情<div class="chips-wrapper"> <span v-for="(test, index) in tests" :key="index"> <v-chip v-if="`chips.Chip${test.id}`" class="tags" close label @click:close="RemoveTest(test.id)" > {{ test.name }} </v-chip> </span></div>removetest()是我需要将检查设置为 false 以便它对 DOM 隐藏的地方，但由于某种原因代码无法正常工作methods: { RemoveTest(testID) { let chipName=`Chip${testID}`; console.log(chipName); this.chips.chipName=false },}如果我尝试打印芯片对象，它会显示预期生成的键/值对{ "Chip0": true, "Chip1": true, "Chip2": true, "Chip3": true}方法内的代码removeTest()应该将值更改为 false，但事实并非如此，有什么帮助吗？
1 回答
慕斯王
TA贡献1864条经验 获得超2个赞
使用Vue.set（或this.$set在组件中）在运行时向数据对象添加属性：
for (let test in this.tests) {
let chipName = "Chip" + test;
this.$set(this.chips, chipName, true);
}
来自 Vue 的反应性文档：
Vue 无法检测属性添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此数据对象中必须存在一个属性，以便 Vue 对其进行转换并使其具有反应性...但是，可以使用以下方法将反应性属性添加到嵌套对象： Vue.set(对象, 属性名, 值) 方法
添加回答
举报
0/150
提交
取消