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

Question

我正在使用Vueitfy的v-chip组件，在点击十字图标时隐藏/显示芯片。文档指出要添加布尔值v-if

data() {

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