vuetify 的 v-checkbox 对象模型

Question

v-checkbox vuetify 组件是否没有按预期工作？我正在尝试将一个对象设置为值，但它似乎无法正常工作，我设置有误吗？

<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="{ 'id': 1, 'subId': 12 }"></v-checkbox>

<label>
    <input type="checkbox" :value="{ 'id': 1, 'subId': 12 }" v-model="selected">
    my Object with input type checkbox
</label>

    </v-container>
  </v-app>
</div>

JS:

new Vue({
  el: '#app',
  data () {
    return {
      selected: ['A', { "id": 1, "subId": 12 }]
    }
  }
})

代码笔：https://codepen.io/anon/pen/OZYzYw?&editors=101

Answer 1

这很棘手。因为Javascript object is passed by reference.

首先，如何让它发挥作用：https://codepen.io/jacobgoh101/pen/KRLQaK?editors=1010

HTML

<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="Object" :value="checkboxObjectValue"></v-checkbox>
    </v-container>
  </v-app>
</div>

Javascript

new Vue({
  el: "#app",
  data() {
    return {
      selected: ["A"]
    };
  },
  created() {
    this.checkboxObjectValue = { id: 11, subId: 12 };
    this.selected.push(this.checkboxObjectValue);
  }
});

现在解释...

Javascript 对象通过引用传递。当您将对象传递给某物时，它不会传递整个对象值，而是传递引用。我喜欢将其视为传递内存中对象的地址。

当您在 v-checkbox 中执行 :value="{ 'id': 1, 'subId': 12 }" 时，发生的情况是每次此组件重新渲染时，都会生成一个新对象并将其分配给该值。 一个新的对象引用被传递给值！因此，当你把它推到selected时，它被认为是一个新对象，所以它只是不断地添加一个新对象到selected数组。

为避免这种情况，请先创建一个包含该值的对象。然后到处使用同一个对象以避免生成新对象。值对象应该只生成一次。

vuetify 的 v-checkbox 对象模型

v-checkbox object model with vuetify

vuejs2

vuetify.js