uniapp中一点全都弹出弹框了，我想点击对应列表出现对应弹窗

Question

uniapp中一点全都弹出弹框了，我想点击对应列表出现对应弹窗

<div class="cent" v-for="(item,index) in listRe" @click="showInput(index)">
                        <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 v-if="showInputBox" class="showInputBox">
                            <!-- <input type="text" v-model="inputValue" @blur="saveInput" /> -->
                            <u-input v-model="inputValue" :type="type" :border="border" @blur="saveInput" placeholder='请输入处理方式'/>
                        </div>
                    </div>
                    
                

showInput(item) {
                // 点击元素时显示输入框
                console.log(item);
                this.showInputBox = true;
                // 将对应的数据保存到inputValue中
                // this.inputValue = item.al_zbgno;
            },
            saveInput() {
                // 输入框失去焦点时保存输入的内容
                // 可以在这里进行相应的处理，比如更新数据列表等
                console.log(this.inputValue);
                this.showInputBox = false; // 隐藏输入框
            }

Answer 1

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

为了实现每个列表项点击后弹出对应的输入框并保存数据，你需要对代码做一些调整。首先，在data部分为每个列表项添加一个额外的字段来存储处理方式（假设这个字段名为handleWay），然后在v-for循环内根据索引动态绑定输入框的值，并且在showInput方法中将输入框的值与对应的列表项关联起来。

这里是修改后的代码示例：

<template>
  <view>
    <div class="cent" v-for="(item, index) in listRe" @click="showInput(index)">
      <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 v-if="item.showInputBox" class="showInputBox">
        <u-input v-model="item.handleWay" :type="type" :border="border" @blur="saveInput(index)" placeholder='请输入处理方式' />
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listRe: [], // 假设这是你的数据列表
      type: 'text',
      border: true,
    };
  },
  methods: {
    showInput(index) {
      // 点击元素时显示输入框
      console.log(index);
      this.listRe[index].showInputBox = true;
    },
    saveInput(index) {
      // 输入框失去焦点时保存输入的内容
      const inputValue = this.listRe[index].handleWay;
      console.log(inputValue);
      this.listRe[index].showInputBox = false; // 隐藏输入框
      // 在这里可以进行相应的处理，比如更新数据列表等
    },
  },
};
</script>

这段代码中的关键改动是：

1. 在listRe数组的每个对象中添加了一个新的字段showInputBox，默认值为false。
2. 修改了输入框的显示条件：v-if="item.showInputBox"，这样只有当对应的项被点击时才会显示输入框。
3. 使用index作为参数传递给saveInput函数，以便正确地获取当前输入框关联的列表项。
4. 在saveInput函数中，通过this.listRe[index].handleWay获取输入框的值，并更新showInputBox属性关闭输入框。

这样，每次点击不同的列表项，就会显示对应项的输入框，并且保存输入内容时会关联到正确的列表项。