Vue.js 如何 for each 动态创建的按钮文本字段设置唯一变量

我正在try 为页面上的每一项创建按钮和VUE元素输入.我正在迭代这些项，并用v-for来呈现它们，所以我决定对此进行扩展，并对其余两个项都这样做.我遇到的问题是我需要分别绑定textInput和displayTextbox，但我不确定如何实现这一点.

目前，el-ins中的所有输入文本都绑定到同一个变量，单击以显示输入将同时显示所有输入.

<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() {
        displayTextbox = false,
        textInput = '',
    },

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

        showTextbox() {
            this.displayTextbox = true;
        }
    }
}
</script>

编辑:在@kissu的帮助下，以下是更新后的工作版本

<template>
    <div class="container">
        <div v-for="(item, index) in itemDataList" :key="itemDataList.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() {
        itemDataList = [],
    },

    methods: {
        confirm(id) {
            const selected = this.itemDataList.find(
                (item) => item.id === id,
            )
            selected.displayTextbox = false;
            console.log(selected.textInput);
            // todo send request here
        },

        showTextbox(id) {
            this.itemDataList.find(
                (item) => item.id === id,
            ).displayTextbox = true;
        },
        
        populateItemData() {
            this.items.forEach((item, index) => {
                this.itemDataList.push({
                    id: item.uuid + index,
                    displayTextbox: false,
                    textInput: '',
                    item: item,
                });
            });
        }
    },

    created() {
        // items prop is obtained from parent component vuex
        // generate itemDataList before DOM is rendered so we can render it correctly
        this.populateItemData();
    },
}
</script>