在嵌套的v-for中使用v-model

时，v-model指令绑定的数据会出现作用域问题。需要通过创建一个计算属性或者使用数组对象来解决这个问题。

创建计算属性：当在嵌套的v-for中使用v-model时，可以通过创建一个计算属性来绑定每个v-model指令所需的数据。计算属性可以根据索引值来获取或设置正确的数据。

例如，假设我们有一个包含多个嵌套v-for的表格，其中每个单元格都有一个输入框，我们可以使用以下代码来解决作用域问题：

<template>
  <table>
    <tbody>
      <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">
          <input v-model="tableValue(rowIndex, cellIndex)" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        ['A1', 'B1', 'C1'],
        ['A2', 'B2', 'C2'],
        ['A3', 'B3', 'C3'],
      ],
      inputValues: {},
    };
  },
  methods: {
    tableValue(rowIndex, cellIndex) {
      const key = `${rowIndex}-${cellIndex}`;
      return this.inputValues[key] || '';
    },
  },
  watch: {
    inputValues: {
      handler(newValues) {
        console.log(newValues); // 可以在这里获取更新后的值
      },
      deep: true,
    },
  },
  computed: {
    inputValues() {
      const values = {};
      for (const key in this.inputValues) {
        const [rowIndex, cellIndex] = key.split('-');
        values[key] = this.inputValues[key];
      }
      return values;
    },
  },
};
</script>

通过计算属性 tableValue，我们可以将 v-model 指令绑定到 input 元素，并在计算属性中根据索引值获取或设置对应的数据。

使用数组对象：在嵌套的v-for中使用v-model时，也可以使用数组对象来绑定每个v-model指令所需的数据。通过在数据中创建一个二维数组，然后使用索引来获取或设置数据，这样就可以避免作用域问题。

例如，假设我们有一个包含多个嵌套v-for的表格，我们可以使用以下代码来解决作用域问题：

<template>
  <table>
    <tbody>
      <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">
          <input v-model="tableData[rowIndex][cellIndex]" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        ['A1', 'B1', 'C1'],
        ['A2', 'B2', 'C2'],
        ['A3', 'B3', 'C3'],
      ],
    };
  },
};
</script>

通过直接绑定 tableData[rowIndex][cellIndex] 到 v-model，我们可以根据索引值获取或设置正确的数据，从而解决了作用域问题。

对于以上两种方法，推荐使用计算属性的方式，因为它可以更好地管理数据，并且在需要时可以进行额外的处理，例如触发更新事件或执行其他操作。

在嵌套的v-for中使用v-model

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐