我正在尝试计算对象中的条目数，并将其输出给用户。在一个方法中，使用Object.keys(this.myObject).length可以很好地工作，但当在模板中输出时，它总是0。
示例：
<template>
<div>
Selected: {{ selectedCount }}<br> <!-- Always 0 -->
Selected: {{ Object.keys(selected).length }}<br> <!-- Always 0 -->
<div class="referral-redemptions-table">
<b-table
ref="table"
:items="referrals">
<template v-slot:cell(isReferralRedeemed)="data">
<button type="button" class="btn btn-sm btn-primary" @click="markSelected(data.index)" :class="{ 'btn-ghost' : data.item.isSelected }">
{{ data.item.isSelected ? 'Selected' : 'Redeem' }}
</button>
</template>
</b-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
referrals: [
{
id: 1,
isSelected: false,
name: 'Test',
email: 'test@example.com'
},
{
id: 2,
isSelected: false,
name: 'Test',
email: 'test@example.com'
},
{
id: 3,
isSelected: false,
name: 'Test',
email: 'test@example.com'
},
{
id: 4,
isSelected: false,
name: 'Test',
email: 'test@example.com'
},
],
fields: [
{
key: 'name',
label: 'Who',
sortable: true
},
{
key: 'email',
label: 'Email',
sortable: true
},
],
selected: {},
}
},
computed: {
// a computed getter
selectedCount: function () {
return Object.keys(this.selected).length;
}
},
methods: {
// Mark an item as selected
markSelected: function(index) {
// Not selected, add it
if(!this.referrals[index].isSelected) {
this.selected[index] = {
'id' : this.referrals[index].id,
'email' : this.referrals[index].email
};
} else {
delete this.selected[index];
}
console.log(Object.keys(this.selected).length); // Outputs the correct number
this.referrals[index].isSelected = !this.referrals[index].isSelected;
this.$refs.table.refresh();
},
}
}
</script>
更新
更令人困惑的是，如果我设置了numSelected: 0的data属性，然后使用Object.keys方法在markSelected方法中设置它，那么一切都可以，甚至Object.keys(selected).length在模板中也可用，而不仅仅是我正在设置的变量。
<!-- In template... -->
Selected: {{ numSelected }}<br> <!-- This now shows correctly... -->
Selected: {{ Object.keys(selected).length }} <!-- But so does this. Why would this not work before? -->
markSelected: function(index) {
// [...]
this.numSelected = Object.keys(this.selected).length;
// [...]
},
我找不到它的Vue 3版本，但我相信你遇到了更改检测警告(Vue不知道你正在向对象添加新密钥，所以它不会重新渲染(
请参阅https://v2.vuejs.org/v2/guide/reactivity.html#For-对象
编辑你能澄清一下你是在Vue 2还是在Vue 3上吗？这个答案说这个问题不应该影响你在Vue 3