为什么 Vuetify Checkbox 只有在我阅读时才能按预期工作？

Question

我的 Vuetify 组件v-checkbox 有一个奇怪的行为。

• 重现步骤

codepen 为每个数组元素显示 3 个复选框。我想读取每个复选框附近复选框的实际状态（真或假）。 更改复选框的状态并查看它是否正确显示。 然后，删除{{ counter }} 行并再次检查。

• 预期行为

如果你选中一个复选框，它必须显示'true'，反之，如果你取消选中它，它必须显示'false'。 'false' 是默认值。

实际行为

• 如果我用于检查/取消检查次数的计数器{{ counter }} 正在HTML 中打印，则复选框的状态正在正确显示。如果没有，状态将保持默认值。（但是，如果我 console.log 它，它们似乎已更改）。

这是我的代码： - HTML：

 <div id="app">
  <div v-for="(row, index) in rows" :key="index">
    <v-layout row wrap>
      {{ row.item }}: 
      <v-card flat v-for="(friend, idx) in row.friends" :key="`msg-${idx}`">
        <v-checkbox
           v-model="friend.selected"
           :label="friend.name"
           color="red"
           hide-details
           @click.native="counter++"
        ></v-checkbox>
        {{ counter }}
        {{ friend.selected }}
      </v-card>
    </v-layout>
    <v-divider :key="`divider-${index}`"></v-divider>
  </div>
</div>

• Vue

new Vue({
  el: "#app",
  data () {
    return {
      friendsAdded: ['Friend 1', 'Friend 2', 'Friend 3'],
      items: ['Place 1'],
      counter: 0,
    }
  },
  methods: {
    updateStatus(friend) {
     // Do something later
    },
  },
  computed: {
    rows() {
      const rows = [];
      for(let i = 0; i < this.items.length; i += 1) {
        const row = {};
        row.item = this.items[i];
        row.friends = [];
        for(let j = 0; j < this.friendsAdded.length; j += 1) {
          const friend = {};
          friend.name = this.friendsAdded[j];
          friend.selected = false;
          row.friends.push(friend);
        };
        rows.push(row);
      }
      console.log('rows: ', rows);
      return rows;
    }
  },
})

这里是代码笔：https://codepen.io/rodrigoabb/pen/wYgzWW?editors=1010

我做错了什么？ 如何在不必读取该值（或其他内容）的情况下实现预期行为？

谢谢！

Answer 1

你的方法有一点问题：

您正在尝试（通过使用绑定到friend.selected 的v-model，获取并且还设置值）设置值计算的属性（rows）。

这基本上是错误的：https://vuejs.org/v2/guide/computed.html#Computed-Setter

会发生什么：

模板对更改不敏感，尽管它实际上发生在朋友对象上。 （Vuejs 不会警告你，因为它位于计算的 object 的深层）

因此，组件的重新渲染从未发生过。但如果 {{counter}} 存在，则 {{counter}} 将是重新渲染的唯一原因，这会渲染整个模板，包括 {{friend.selected}}

通过您的简单案例，您可以使用data 函数创建rows 数组。其他选项将使用单独的数据属性与v-model 绑定，这将通过观察器（如果需要）影响主行数组或使用计算设置器。

示例：使用data:

new Vue({
  el: "#app",
  data () {
    let items = ['Place 1'];
    let friendsAdded = ['Friend 1', 'Friend 2', 'Friend 3'];
    const rows = [];
    for(let i = 0; i < items.length; i += 1) {
      const row = {};
      row.item = items[i];
      row.friends = [];
      for(let j = 0; j < friendsAdded.length; j += 1) {
        const friend = {};
        friend.name = friendsAdded[j];
        friend.selected = false;
        row.friends.push(friend);
      };
      rows.push(row);
    }
    console.log('rows: ', rows);
    return {
      friendsAdded,
      items,
      counter: 0,
      rows
    }
  },
  methods: {
    updateStatus(friend) {
     // Do something later
    },
  },
})