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时，它被视为新对象，因此它会继续向{{1}添加新对象数组。

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

v-checkbox对象模型与vuetify

1 个答案: