如何让v-switch根据desserts数据切换状态与标签？

你的问题出在单向绑定无法同步用户操作到数据源，导致开关状态和标签无法联动更新。以下是具体修正方案：

核心修改点 #

• 将:model-value替换为v-model，实现开关与item.status的双向绑定，用户切换开关时会自动更新原数据的status值
• 确保desserts数组中的对象是响应式的（Vue3中直接声明的对象默认响应式，Vue2中如果后续动态添加数据需用Vue.set）

修改后的完整代码 #

Template部分 #

<v-data-table
  :headers="headers"
  :items="desserts"
  :items-per-page="5"
  item-key="name"
  class="elevation-1"
  :footer-props="{
    showFirstLastPage: true,
    firstIcon: 'mdi-arrow-collapse-left',
    lastIcon: 'mdi-arrow-collapse-right',
    prevIcon: 'mdi-minus',
    nextIcon: 'mdi-plus',
    'items-per-page-text':'products per page',
  }"
>
  <template v-slot:item.status="{ item }">
    <v-switch
      color="success"
      v-model="item.status"
      :label="item.status ? 'Delicious' : 'Nope'"
    ></v-switch>
  </template>
</v-data-table>

Script部分（Vue3示例） #

import { ref } from 'vue'

export default {
  setup() {
    const headers = ref([
      { text: 'Order', value: 'order'},
      { text: 'Name', value: 'name'},
      { text: 'Status', value: 'status'},
    ])
    
    const desserts = ref([
      {
        order: '1',
        name: 'Cake',
        status: true
      },
      {
        order: '2',
        name: 'Chocolate',
        status: false
      },
    ])

    return { headers, desserts }
  }
}

Script部分（Vue2示例） #

export default {
  data() {
    return {
      headers: [
        { text: 'Order', value: 'order'},
        { text: 'Name', value: 'name'},
        { text: 'Status', value: 'status'},
      ],
      
      desserts: [
        {
          order: '1',
          name: 'Cake',
          status: true
        },
        {
          order: '2',
          name: 'Chocolate',
          status: false
        },
      ],
    }
  }
}

修改后，开关状态会和item.status同步，切换开关时标签会自动根据status值切换显示"Delicious"或"Nope"。

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