Vue v-for循环列表多条目同时编辑及数据传值实现方案咨询

问题根源 #

你之前的方案使用了全局共享的edit、editItem变量，所有列表项共用这一组状态，因此只能同时激活一个编辑窗口。要实现多窗口同时编辑，需要将编辑状态和临时编辑内容和单个条目绑定，避免状态全局共享。

实现方案 #

方案1：编辑状态绑定到条目本身（最简实现） #

直接给每个列表项补充编辑相关的状态字段，逻辑最直观易维护，适合允许修改原items数据结构的场景。

模板代码修改

<div v-for="item in items" :key="item.id">
    <p>{{ item.description }}</p>
    <button @click="startEdit(item)">Edit</button>
    <textarea v-if="item.isEditing" v-model="item.tempDesc" />
    <!-- 可选补充保存/取消按钮 -->
    <button v-if="item.isEditing" @click="saveEdit(item)">保存</button>
    <button v-if="item.isEditing" @click="cancelEdit(item)">取消</button>
</div>

JS逻辑

// 触发编辑
function startEdit(item) {
    if (!item.isEditing) {
        // 初始化临时编辑内容为原描述
        item.tempDesc = item.description
        item.isEditing = true
    }
}

// 保存编辑结果
function saveEdit(item) {
    item.description = item.tempDesc
    item.isEditing = false
}

// 取消编辑
function cancelEdit(item) {
    item.isEditing = false
}

方案2：独立状态存储（不污染原数据） #

如果需要保留原items数据的纯净性，不允许新增额外字段，可以单独用一个对象存储所有条目的编辑状态。

定义状态

// 键为item.id，值存储对应条目的编辑状态和临时内容
const editingState = ref({})

模板代码修改

<div v-for="item in items" :key="item.id">
    <p>{{ item.description }}</p>
    <button @click="startEdit(item)">Edit</button>
    <textarea 
        v-if="editingState[item.id]?.isEditing" 
        v-model="editingState[item.id].tempDesc" 
    />
    <button v-if="editingState[item.id]?.isEditing" @click="saveEdit(item)">保存</button>
    <button v-if="editingState[item.id]?.isEditing" @click="cancelEdit(item)">取消</button>
</div>

JS逻辑

// 触发编辑
function startEdit(item) {
    editingState.value[item.id] = {
        isEditing: true,
        tempDesc: item.description
    }
}

// 保存编辑结果
function saveEdit(item) {
    item.description = editingState.value[item.id].tempDesc
    delete editingState.value[item.id]
}

// 取消编辑
function cancelEdit(item) {
    delete editingState.value[item.id]
}

内容的提问来源于stack exchange，提问作者Dave