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

<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>

<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>