Question

我正在尝试创建一组临时输入，这些输入仅在单击按钮时才保存。使用v-for循环在行中创建输入，每行包含一个 SAVE 按钮。如何从 SAVE 按钮的点击处理程序中获取输入的值？

脚本摘录：

export default {
  data() {
    return {
      listCollection: [
        {
          name:'example',
          phone:'+73849869485',
          email:'anything@example.com',
          address:'something',
          disabled: true,
        },
        {
          name:'example',
          phone:'+73849869485',
          email:'anything@example.com',
          address:'something',
          disabled: true,
        },
        {
          name:'example',
          phone:'+73849869485',
          email:'anything@example.com',
          address:'something',
          disabled: true,
        },
        {
          name:'example',
          phone:'+73849869485',
          email:'anything@example.com',
          address:'something',
          disabled: true,
        },
      ],
    }
  },
  methods: {
    modifyList(index) {
      if (this.listCollection[index].disabled === false) {
        this.listCollection[index].name = index; // <-- change it to input field's value here, not to index
        this.listCollection[index].phone = index;
        this.listCollection[index].email = index;
        this.listCollection[index].address = index;
        this.listCollection[index].disabled = true;
      }
    },
  }
}

模板摘录：

<tr v-for="(t,index) in listCollection">
  <td><input type="text" :value="t.name"  class="form-control" :class="index" placeholder="name" :disabled="t.disabled" ></td>
  <td><input type="text" :value="t.phone"  class="form-control" :class="index" placeholder="phone" :disabled="t.disabled" ></td>
  <td><input type="text" :value="t.email"  class="form-control" :class="index" placeholder="email" :disabled="t.disabled" ></td>
  <td><input type="text" :value="t.address"  class="form-control" :class="index" placeholder="address" :disabled="t.disabled" ></td>
  <div class="px-2">
    <img class="icon" v-b-tooltip.hover.bottom="'edit'" v-on:click="t.disabled = !t.disabled" src="../../node_modules/open-iconic/svg/action-redo.svg" alt="icon name">
    <img class="icon" v-b-tooltip.hover.bottom="'delete'" v-on:click="deleteList(index)" src="../../node_modules/open-iconic/svg/delete.svg" alt="icon name">
    <img class="icon" v-b-tooltip.hover.bottom="'save'" v-on:click="modifyList(index)" src="../../node_modules/open-iconic/svg/cloud-upload.svg" alt="icon name">
  </div>
</tr>

如果我使用v-model（例如v-model="t.name"）而不是:value，则无法在modifyList()中访问它，但是如果我使用v-model="something"例如，我的表没有被数组中的值填充。

Answer 1

您可以尝试在每个数组元素中使用一个临时变量来自动存储相应的输入值，而不是尝试访问处理程序中的输入，然后在准备保存到modifyList()中时将它们复制过来：

定义saveTemp()，将用户输入保存在当前数组元素（__temp）中的临时变量（例如item）中：
```
saveTemp(item, key, value) {
  item.__temp = item.__temp || {};
  item.__temp[key] = value;
}
```
添加调用<input>的{{1}} change-event处理程序，以将输入值存储在当前数组元素（saveTemp()）中：
```
t
```
更新 SAVE 按钮的<td><input @change="saveTemp(t, 'name', $event.target.value)" :value="t.name"></td> <td><input @change="saveTemp(t, 'phone', $event.target.value)" :value="t.phone"></td> <td><input @change="saveTemp(t, 'email', $event.target.value)" :value="t.email"></td> <td><input @change="saveTemp(t, 'address', $event.target.value)" :value="t.address"></td>处理程序，以将数组元素（click）而不是t传递给index：
```
modifyList()
```
使用Object.assign()更新<img v-b-tooltip.hover.bottom="'save'" v-on:click="modifyList(t)">以检查modifyList()数据是否已提交：
```
__temp
```

demo

如何访问v-for循环内的元素？

1 个答案: