uniapp我有多个输入框，现在一输入内容，全都输入相同的内容了，我该怎么办

Question

<div class="bigC" v-for="(item,index) in listRe" @click="showInput(index)">
                        <div class="cent">
                            <div class="text">
                                <span>库房编号:</span>
                                <span>{{item.al_zbgno}}</span>
                            </div>
                            <div class="text">
                                <span>储位编号:</span>
                                <span>{{item.al_stno}}</span>
                            </div>
                            <div class="text">
                                <span>报警名称:</span>
                                <span>{{item.al_name}}</span>
                            </div>
                            <div class="text">
                                <span>报警时间:</span>
                                <span>{{item.al_time1}}</span>
                            </div>
                            <div class="text">
                                <span>报警账号:</span>
                                <span>{{item.al_accno1}}</span>
                            </div>
                            <div class="text">
                                <span>报警姓名:</span>
                                <span>{{item.al_accna1}}</span>
                            </div>

                        </div>
                        <div v-if="item.showInputBox" class="showInputBox">
                            <!-- <input type="text" v-model="inputValue" @blur="saveInput" /> -->
                            <u-input v-model="user.al_note" :type="type" :border="border" placeholder='请输入处理方式'  />
                            <u-button type="primary" @click='gomyreview5(item.al_no,index)'>确定</u-button>
                        </div>
                    </div>
                                        showInput(index) {
                this.selectedIndex = index;

                this.$nextTick(() => {
                    // 点击元素时显示输入框
                    this.listRe[index].showInputBox = !this.listRe[index].showInputBox;
                    this.$forceUpdate() //强制更新组件。
                });

            },
            gomyreview5(item,index){
                this.user.al_no=item
                console.log(this.user);
                this.$nextTick(() => {
                    // 点击元素时显示输入框
                    this.listRe[index].showInputBox = false;
                    this.$forceUpdate() //强制更新组件。
                    this.user.al_note=''
                });
            }

uniapp我有多个输入框，现在一输入内容，全都输入相同的内容了，我该怎么办

Answer 1

引自免费微信小程序：皆我百晓生

在您的代码中，所有输入框共享同一个 user.al_note 数据绑定，因此当您在其中一个输入框中输入内容时，由于所有输入框都使用同一份数据源，所以其他输入框也会同步显示相同的值。

为了解决这个问题，你需要为每个输入框分配一个独立的数据绑定。可以通过在列表项对象中添加一个新的属性来实现这个目标。这里我会为每个列表项创建一个单独的 al_note 属性，并且在点击事件中根据索引修改对应的值。以下是修改后的代码：

首先，在 Vue 实例的 data 部分添加一个新数组，用于存储每个列表项的输入值：

data() {
    return {
        listRe: [], // 假设这是你的列表数据
        inputValueList: [] // 新增数组，用于存储每个输入框的值
    };
},

然后，在模板中，将每个输入框的 v-model 更改为对应索引的 inputValueList 中的值：

<u-input 
    v-model="inputValueList[index]" 
    :type="type" 
    :border="border" 
    placeholder='请输入处理方式'  
/>

接下来，调整 showInput 方法，将新输入值保存到 inputValueList 中：

showInput(index) {
    this.selectedIndex = index;

    this.$nextTick(() => {
        // 点击元素时显示输入框
        this.listRe[index].showInputBox = !this.listRe[index].showInputBox;
        if (!this.inputValueList[index]) { // 如果当前索引没有值，初始化为空字符串
            this.inputValueList[index] = '';
        }
        this.$forceUpdate(); // 强制更新组件。
    });
},

删除 gomyreview5 方法中的这一行，因为我们不需要清空全局的 user.al_note，而是清空特定输入框的值：

// 删除这行
// this.user.al_note = '';

这样，每次输入时，就会更新相应输入框关联的 inputValueList 中的值，而不是全局的 user.al_note。同时，确保每个列表项都有自己的输入值，从而解决了一输入就全部同步的问题。