Vue中如何在v-for循环里获取输入框更新后的值

你当前的问题出在单向绑定上：用:value="item.name"只是把item.name的初始值渲染到输入框，但输入框的修改不会同步回my_items数组里的item.name。所以点击按钮时，传入edit函数的还是最初的旧值。

下面是几种可行的解决方法：

方法一：使用v-model双向绑定（推荐） #

这是Vue最标准的做法，直接让输入框和item.name双向同步，修改输入框时自动更新数据，点击按钮时自然能拿到最新值。

修改HTML代码：

<div v-for="item in my_items" :key="item.id">
    <div>
      <!-- 把:value替换为v-model实现双向绑定 -->
      <input type="text" v-model="item.name" />
    </div>
    <div>
      <button @click="edit(item.id, item.name)">Edit</button>
    </div>
</div>

JavaScript代码无需修改，此时点击编辑按钮，控制台会输出输入框的最新内容。

方法二：通过事件对象获取输入框当前值 #

如果不想用双向绑定，可以借助点击事件的$event对象，从DOM中直接获取输入框的当前值。

修改HTML代码：

<div v-for="item in my_items" :key="item.id">
    <div>
      <input type="text" :value="item.name" />
    </div>
    <div>
      <!-- 传入$event作为参数 -->
      <button @click="edit(item.id, $event)">Edit</button>
    </div>
</div>

修改JavaScript的edit函数：

async edit(id, event){
    // 从DOM结构中定位到对应的输入框并获取值
    const input = event.target.closest('div').previousElementSibling.querySelector('input');
    const currentName = input.value;
    console.log("edit", id);
    console.log("name", currentName);
}

方法三：通过ref获取输入框值 #

给每个输入框设置唯一的ref标识，点击按钮时通过ref获取对应输入框的值。

修改HTML代码：

<div v-for="item in my_items" :key="item.id">
    <div>
      <!-- 给每个输入框设置唯一的ref -->
      <input type="text" :value="item.name" :ref="`input-${item.id}`" />
    </div>
    <div>
      <button @click="edit(item.id)">Edit</button>
    </div>
</div>

修改JavaScript的edit函数：

async edit(id){
    // v-for中ref会生成数组，取第一个元素即为对应输入框
    const input = this.$refs[`input-${id}`][0];
    const currentName = input.value;
    console.log("edit", id);
    console.log("name", currentName);
}

总结 #

优先选择方法一，它符合Vue的数据驱动思想，代码简洁且易于维护，避免了直接操作DOM的冗余逻辑。

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