动态生成的对象密钥不更新

Question

我正在使用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，但事实并非如此，有什么帮助吗？

Answer 1

使用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(对象, 属性名, 值) 方法