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 объект передается по ссылке .

. Во-первых, как заставить его работать: 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 передается по ссылке.Когда вы передаете объект чему-либо, он передает не все значение объекта, а ссылку.Мне нравится думать об этом как о передаче адреса объекта в памяти.

Когда вы делаете :value="{ 'id': 1, 'subId': 12 }" в v-checkbox, происходит то, что каждый раз, когда этот компонент перерисовывается, новый объект генерируется и присваивается значению. Ссылка на новый объект передается значению! Поэтому, когда вы помещаете его в selected, он считается новым объектом, поэтому он просто продолжает добавлять новый объект в массив selected.

Чтобы избежать этого, сначала создайте объект, содержащий значение.Затем используйте этот же объект везде, чтобы избежать создания нового объекта.Объект значения должен быть сгенерирован только один раз.