我有要回圈使用的元素串列，其中包含文本。
<div v-for="item in items" :key="item.id">
<p>{{ item.description }}</p>
<button @click="edit=true">Edit</button>
<textarea v-if="edit" v-model=editItem />
</div>
每次單擊編輯時如何將專案描述轉移到文本區域？
我可以這樣做：
function somefunction(item) {
edit.value = true
editItem.value = item.description
}
但問題是，它一次只能編輯一個專案，我希望能夠啟用多個編輯視窗。有人可以給我建議如何做嗎？
uj5u.com熱心網友回復：
要在 a 中編輯多行v-for，這里是我在所有視圖/模型框架中使用的方法：
- 創建一個陣列，您可以在其中推送行的所有 ID/索引進行編輯。
- 對于每個專案的 v-model，您可以使用反應式物件，您可以在其中使用 ids/indexes 作為鍵設定值。
演示：https : //jsfiddle.net/The_Bear/0hvtxb3r/47/
模板
<div v-for="item in items" :key="item.id">
<p>{{ item.description }}</p>
<button @click="setEdit(item.id)">Edit</button>
<textarea
v-if="isEdit(item.id)"
:value="editItem[item.id]"
@input="updateEditItem(item.id, $event.target.value)"
/>
</div>
JS
{
//...
data: {
editableRows: [],
editItem: {},
items: [
{ id: 1, description : "Learn JavaScript" },
//...
]
},
methods: {
isEdit(id) {
return this.editableRows.indexOf(id) >= 0;
},
setEdit(item){
this.editableRows.push(item.id);
this.updateEditItem(item.id, item.text);
},
updateEditItem(key, value) {
this.editItem= {
...this.editItem,
[key]: value
};
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/368237.html
上一篇：獲取陣列的欄位值
下一篇：如何為切換按鈕添加滑動影片？