求助：Vuetify v-checkbox绑定对象值未达预期，是否配置有误？

我来帮你排查这个问题～你遇到的核心原因是JavaScript中引用类型的相等性判断规则，以及Vuetify组件对选中状态的处理逻辑导致的，下面详细解释并给出解决方案：

问题根源 #

当你把对象作为v-checkbox的value时，Vuetify（以及底层的Vue）判断checkbox是否选中的依据是严格相等（===）——也就是两个对象的内存引用是否完全相同。

看你的代码：

• 初始selected数组里的对象是{ "id": 1, "subId": 12 }
• v-checkbox绑定的:value是一个新创建的对象{ 'id': 1, 'subId': 12 }

这两个对象内容完全一致，但它们是内存中两个独立的对象，引用不同。所以v-checkbox用Array.prototype.includes检查时，会认为数组里没有这个值，因此初始状态不会被选中。

至于原生checkbox的表现，其实它的判断逻辑和Vuetify是一致的——同样依赖严格相等，所以你的原生checkbox初始也应该不会被选中，可能是测试时的误解哦😉

解决方案 #

方案1：复用同一个对象引用（最简单的解决方式） #

把要绑定的对象提前定义在data中，让v-checkbox的:value和初始selected数组里的对象共享同一个引用：

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <p>{{ selected }}</p>
      <v-checkbox v-model="selected" label="A" value="A"></v-checkbox>
      <v-checkbox v-model="selected" label="my Object with v-checkbox" :value="myTargetObject"></v-checkbox>
      <label>
        <input type="checkbox" :value="myTargetObject" v-model="selected">
        my Object with input type checkbox
      </label>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  data () {
    // 提前定义对象，确保引用唯一
    const myTargetObject = { "id": 1, "subId": 12 }
    return {
      selected: ['A', myTargetObject],
      myTargetObject
    }
  }
})

这样一来，v-checkbox就能通过引用相等判断出对象已经在selected数组中，初始会正确选中，点击时也能正常添加/移除。

方案2：自定义选中判断逻辑（适用于无法共享引用的场景） #

如果你的对象来自外部（比如API请求），无法提前复用引用，可以通过v-checkbox的input-value属性和@change事件手动处理选中状态，基于对象的唯一标识（比如id+subId）来判断：

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <p>{{ selected }}</p>
      <v-checkbox v-model="selected" label="A" value="A"></v-checkbox>
      <v-checkbox 
        :input-value="isObjectSelected"
        @change="handleObjectToggle"
        label="my Object with v-checkbox"
      ></v-checkbox>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      selected: ['A', { "id": 1, "subId": 12 }],
      targetObject: { 'id': 1, 'subId': 12 }
    }
  },
  computed: {
    isObjectSelected() {
      // 根据对象的唯一标识判断是否已选中
      return this.selected.some(item => 
        typeof item === 'object' && 
        item.id === this.targetObject.id && 
        item.subId === this.targetObject.subId
      )
    }
  },
  methods: {
    handleObjectToggle(checked) {
      if (checked) {
        // 避免重复添加相同内容的对象
        const exists = this.selected.some(item => 
          typeof item === 'object' && 
          item.id === this.targetObject.id && 
          item.subId === this.targetObject.subId
        )
        if (!exists) {
          this.selected.push({...this.targetObject}) // 可以浅拷贝避免引用问题
        }
      } else {
        // 根据内容移除对象
        this.selected = this.selected.filter(item => 
          !(typeof item === 'object' && 
            item.id === this.targetObject.id && 
            item.subId === this.targetObject.subId)
        )
      }
    }
  }
})

这个方案通过手动判断对象的内容相等性，摆脱了引用的限制，适合动态生成对象的场景。

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