Vuetify v-data-table展开项复选框点击无响应问题求助

问题根源 #

你代码里的item.c是布尔值数组[false, false]，但复选框的v-model绑定的是cs.selected——cs本身就是个布尔值，根本没有selected属性，自然没法实现双向绑定。另外，直接绑定原始类型（布尔/字符串/数字）在v-for循环里，Vue也无法追踪到响应式变化，就算改成绑定cs也没用。

修复步骤 #

1. 调整数据结构：把items里的c数组元素改成带selected属性的对象，让Vue能追踪到属性的变化
2. 保持模板绑定不变：模板里的v-model="cs.selected"现在能正确对应对象的属性，实现双向绑定

完整修复代码 #

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    show-expand
    single-expand
  >
    <template v-slot:expanded-item="{ item, headers }">
      <td :colspan="headers.length">
        <v-row v-for="(cs, index) in item.c" :key="index">
          <v-simple-checkbox
            v-model="cs.selected"
            :ripple="false"
          >
          </v-simple-checkbox>
        </v-row>
      </td>
    </template>
  </v-data-table>
</template>
<script>
export default {
  data() {
    return {
      headers: [
        {
          text: 'A',
          align: 'center',
          sortable: false,
          value: 'a'
        },
        {
          text: 'B',
          align: 'center',
          sortable: false,
          value: 'b'
        }
      ],
      items: [
        { a: 'my A', b: 'my B', c: [{ selected: false }, { selected: false }] },
        { a: 'my A', b: 'my B', c: [{ selected: false }, { selected: false }] }
      ]
    }
  }
}
</script>

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