为什么 Vuetify 复选框只有在我进行读取时才按预期工作?

Question

我在 Vuetify 组件v-checkbox中遇到了奇怪的行为。

• 重现步骤

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

• 预期行为

如果您选中一个复选框，它必须显示">

true"，反之亦然，如果您取消选中它，它必须显示"false"。"false"是默认值。

实际行为

• 如果我用于检查/取消检查次数的计数器{{ counter }}以 HTML 格式打印，则复选框的状态正在正确显示。否则，状态仍为默认值。(尽管如此，如果我安慰.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://v2.vuejs.org/v2/guide/computed.html#Computed-Setter

发生的情况是：

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

因此，从未发生过组件的重新渲染。但是，如果该{{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
},
},
})