如何为动态创建的按钮/文本框绑定独立变量？

问题场景 #

通过v-for遍历items数组渲染列表项，需要给每个item配置独立的输入框和操作按钮，但当前实现存在两个问题：

• 所有输入框的v-model绑定到同一个全局textInput变量，输入内容会同步到所有输入框
• 点击显示按钮时，全局的displayTextbox变量会控制所有输入框同时显示/隐藏，无法单独控制单个item的输入状态

初始代码 #

<template>
    <div class="container">
        <div v-for="(item, index) in items" :key="index">
            <icon @click="showTextbox"/>
            <el-input v-if="displayTextbox" v-model="textInput" />
            <el-button v-if="displayTextbox" type="primary" @click="confirm" />
            <ItemDisplay :data-id="item.id" />
        </div>
    </div>
</template>

<script>
import ItemDisplay from '@/components/ItemDisplay';

export default {
    name: 'ItemList',

    components: {
        ItemDisplay,
    },

    props: {
        items: {
            type: Array,
            required: true,
        },
    },

    data() {
        return {
            displayTextbox: false,
            textInput: '',
        }
    },

    methods: {
        confirm() {
            // todo send request here
            this.displayTextbox = false;
        },

        showTextbox() {
            this.displayTextbox = true;
        }
    }
}
</script>
> 注：修正了初始代码中`data`函数的语法错误（原代码未返回对象）

解决方案 #

核心思路是为每个item创建独立的状态容器，不再使用全局状态变量。通过生成一个itemDataList数组，每个元素包含对应item的专属状态（显示状态、输入值）和原始数据，实现每个item状态的独立控制。

可运行的更新代码 #

<template>
    <div class="container">
        <div v-for="(item, index) in itemDataList" :key="item.id">
            <icon @click="showTextbox(item.id)"/>
            <El-Input v-if="item.displayTextbox" v-model="item.textInput" />
            <El-Button v-if="item.displayTextbox" type="primary" @click="confirm(item.id)" />
            <ItemDisplay :data-id="item.item.uuid" />
        </div>
    </div>
</template>

<script>
import ItemDisplay from '@/components/ItemDisplay';

export default {
    name: 'ItemList',

    components: {
        ItemDisplay,
    },

    props: {
        items: {
            type: Array,
            required: true,
        },
    },

    data() {
        return {
            itemDataList: [],
        }
    },

    methods: {
        confirm(id) {
            const selected = this.itemDataList.find(item => item.id === id);
            selected.displayTextbox = false;
            console.log(selected.textInput);
            // 此处可添加请求逻辑
        },

        showTextbox(id) {
            const selected = this.itemDataList.find(item => item.id === id);
            selected.displayTextbox = true;
        },
        
        populateItemData() {
            this.itemDataList = this.items.map((item, index) => ({
                id: `${item.uuid}-${index}`,
                displayTextbox: false,
                textInput: '',
                item: item,
            }));
        }
    },

    created() {
        // 在DOM渲染前初始化状态数组，确保列表正确渲染
        this.populateItemData();
    },
}
</script>

关键改进点 #

• 将全局的displayTextbox和textInput替换为每个item独立的状态属性
• 通过item.id作为唯一标识，在点击事件中精准定位并修改对应item的状态
• 使用map方法更简洁地生成状态数组（替代原forEach+push写法）
• 修正了data函数的语法问题，确保符合Vue规范

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