将项目数据传输到编辑 window 多个项目

Question

我有循环使用的元素列表，它包含文本。

<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
}

但问题是，它一次只能编辑一个项目，我希望能够启用多个编辑 windows。有人可以给我建议怎么做吗？

Answer 1

要在 v-for 中编辑多行，这是我在所有 view/model 框架中使用的方法：

创建一个数组，将所有 ids/indexes 行推送到其中进行编辑。
对于每个项目的 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, text: "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
        };
    }
  }
}

将项目数据传输到编辑 window 多个项目

Transfer item data to editing window for multiple items

vue.js

vuejs3