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

Question

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

• 重现步骤

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

• 预期行为

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

实际行为

• 如果我用于检查/取消检查次数的计数器 {{ counter }} 正在 HTML 中打印，则复选框的状态正在正确显示。否则，状态将保持默认值。(尽管如此，如果我控制台记录它，它们似乎已更改)。

这是我的代码: - 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>

• 视觉

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

你的方法有一点不对:

您正在尝试(通过使用绑定(bind)到 friend.selected 的 v-model，它获取并且设置 值)设置计算属性(行)的值。

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

发生的事情是:

模板对更改不敏感，尽管它实际上发生在 friend 对象上。 (Vuejs 不会警告你，因为它在计算的对象的深层)

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

对于您的简单案例，您可以使用 data 函数来创建 rows 数组。其他选项将使用单独的数据属性与 v-model 绑定(bind)，这将影响主行数组与观察者(如果需要)或使用计算 setter。

示例:使用数据:

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