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

Question

我在Vuetify组件v-checkbox中的行为很奇怪。

• 复制步骤

代码笔每个数组元素显示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;
    }
  },
})

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

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

谢谢！

Answer 1

您的方法有误：

您正在尝试（通过使用绑定到v-model的{​​{1}}来设置并设置值）， 计算属性（即friend.selected）的“ strong”值。

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

会发生什么：

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

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

在简单的情况下，您可以使用{{friend.selected}}函数来创建data数组。其他选项将使用单独的data属性与rows绑定，这将随后通过观察程序影响主行数组（如果需要）或使用计算的setter。

示例：使用v-model：

data