如何在VUE中使用参数访问v-model值

Answer 1

在Vue.js中，您应该使用v-model进行双向数据绑定。 v-model 指令是绑定数据以形成输入并更新用户输入数据的便捷简写。但是，它不能直接用作 prop 或作为参数传递。相反，您可以传递整个对象并在方法中使用它。

以下是修改代码的方法：

<template>
  <div v-for="(item, idx) in data" :key="idx">
    <input :id="item" v-model="item.value"></input>
    <button @click="submitTest(item)">testbtn</button>
  </div>
</template>

<script setup>
const data = ref([
  { id: 'input1', value: '' },
  { id: 'input2', value: '' },
  // ... other items
]);

function submitTest(item) {
  alert(item.value);
}
</script>

在此示例中，数据数组中的每个项目都是一个具有 id 和 value 属性的对象。 v-model 指令绑定到 item.value。当您单击按钮时，将使用整个项目对象调用 SubmitTest 函数，您可以从那里访问 value 属性。

确保在设置脚本中使用 ref 创建对数据数组的反应性引用。

注意： :key="idx" 添加到 中，为循环中的每个项目提供唯一的键。这有助于 Vue.js 在数组更改时高效更新和重新渲染组件。