嗨，我遇到了嵌套陣列動態更新的問題，如下圖所示
這是重現問題的步驟
- 單擊
Add Likes按鈕它將添加喜歡，例如New Apple - 我的默認喜歡是
Mango - 點擊
Add about按鈕，它將添加下一行（芒果沒有出現）點擊Add Likes查看問題。
為了降低代碼的可讀性，我將輔助函式放入一個名為的 mixin 檔案中mixin.js
期望： 我可以添加任意數量的Add about和Add Likes（默認值Mango）
這是我的代碼： https : //codesandbox.io/s/musing-hawking-di4d3?file=/src/App.vue
uj5u.com熱心網友回復：
首先，您不需要 tags 屬性的嵌套陣列。利用：
getLikesTemplate() {
let year = this.year;
let template = {
id: this.getUniqueId(),
like: `I'm ${year} Old and like things like`,
tags: [this.getTagsTemplate("Mango")] //nesting removed
};
this.year ;
return template;
}
其次，在 JS 中物件是通過參考傳遞的，所以你可以這樣做：
方法：
addLikes(like) { //removed the extra code
like.tags.push(this.getTagsTemplate("New Apple"));
},
模板：
...
<div style="text-align: left; display: flex">
<div> //nesting removed
<div class="tags" v-for="tag in like.tags" :key="tag.id">
{{ tag.name }}
</div>
</div> //passing the reference to the object
<button style="margin-left: 20px" @click="addLikes(like)">
Add Likes
</button>
</div>
結果圖片
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/419569.html
標籤：
下一篇：陣列中最長偶數長度子串