亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

動態生成的對象密鑰不更新

動態生成的對象密鑰不更新

交互式愛情 2023-09-28 17:16:22
我正在使用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(對象, 屬性名, 值) 方法


查看完整回答
反對 回復 2023-09-28
  • 1 回答
  • 0 關注
  • 90 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號