v-checkbox 对象模型与 vuetify

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 }]
    }
  }
})

Codepen：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 数组添加一个新对象。

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