iT邦幫忙

0

(已解決)Vue.js 在 script 中控制 checkbox 二維陣列

大家好,我是 Vue.js 的新手還請多多指教,此篇問題是延伸我的另一個問題,請參考 (已解決)Vue.js 在 v-for 中的 v-model 請教

使用二維陣列後我暫時有點不太知道怎麼在 script 中控制每一個 checkbox,我有測試過 this.checkboxArray[idx][x] 這樣格式的寫法但好像不太行,所以再請教。

我想將 HTML 中每一個 checkboxvalue 改成 false
然後在 methods: {//...} 中控制某幾個 checkboxtrue (因為是透過串接 API 後才會知道哪些為 true,所以才另外寫在 methods)。

然後希望能夠在 clickBtn
console.log 印出那一個 Table 的每一個動物的 ture/false,例如:console.log(this.checkboxArray[idx][x])顯示ture/false

謝謝/images/emoticon/emoticon41.gif


補充:
沒有辦法在 script 中控制 checkbox 二維陣列,例如以下是目前測試的程式碼,this.checkboxArray[idx][x] 會顯示 undifiend

<script>
    for(let idx=0;idx<row;idx++){
        for(let x=0;x<this.list.length;x++){
            console.log(this.checkboxArray[idx][x]);
        }
    }
</script>
依照問題的敘述,毛毛大已經回答得滿清楚了
不知道 API 回傳格式是什麼樣子,所以沒有辦法給其他建議
小斑 iT邦新手 3 級 ‧ 2021-10-24 16:05:38 檢舉
不好意思,現在才看到您在這邊的留言,已經參考@毛毛大大的回答成功解決問題了,謝謝您這兩天抽空幫助我,真的很感謝您!

1 個回答

1
Mao
iT邦新手 2 級 ‧ 2021-10-24 15:26:30
最佳解答

會顯示 undefined 是因為資料還沒賦值。

首先把初始化新增列表來讓 checkbox 綁定 v-model


created(){
    this.checkboxArray.push(...Array.from({ length: this.list.length }).map(() => ({"雞":false,"豬":false,"牛":false})));
    // 這裡後面可以寫接收到的資料,把對應的資料切換成 true
    for(let idx=0;idx<this.list.length;idx++){
      for(const x in this.checkboxArray[idx]){
        console.log(`第 ${idx + 1} animals ${x} 的值是 ${this.checkboxArray[idx][x]}`);
      }
    }
}

把原本 checkbox 寫死的 value 值去掉,並使用 v-model 控制 value 值

v-model="checkboxArray[key]['雞']"
<!--  雞豬牛分別帶入第二個 []  -->

然後修改 clickBtn

clickBtn(idx) {
  for(const key in this.checkboxArray[idx]){
    console.log(key + " : "+ this.checkboxArray[idx][key]);
  }
}

Codepen 示範

小斑 iT邦新手 3 級 ‧ 2021-10-24 16:02:09 檢舉

可以成功解決,真的非常非常感謝您這兩天抽空幫助我,您的回答也都非常詳細好懂,真的很感謝您!
/images/emoticon/emoticon41.gif/images/emoticon/emoticon41.gif/images/emoticon/emoticon41.gif/images/emoticon/emoticon42.gif/images/emoticon/emoticon42.gif/images/emoticon/emoticon42.gif

gmlin iT邦新手 5 級 ‧ 2021-10-25 09:25:07 檢舉

好奇問下

    for(let idx=0;idx<this.list.length;idx++){
      for(const x in this.checkboxArray[idx]){
        console.log(`第 ${idx + 1} animals ${x} 的值是 ${this.checkboxArray[idx][x]}`);
      }
    }

這兩個for分別使用了let/const ,這有什麼考量才這樣做呢?

Mao iT邦新手 2 級 ‧ 2021-10-25 14:24:34 檢舉

let 是因為 for 迴圈會改變 idx 值。
const 是在 for 迴圈裡面取物件的 key 值並宣告,因為不會刻意修改 key 值,所以使用 const,當然如果你有要把 key 值加工,那就要透過 let 來宣告。

主要是看當前宣告的值是否會因為 for 迴圈而改變值,來選擇,但宣告這個動作是一定要使用的。

我要發表回答

立即登入回答