如何重载对象属性的变化在DOM元素在vue?

Question

我需要显示对象的状态，如果它有属性或没有。我添加了一个属性id对象和console.log显示它是真的，但它没有在DOM元素更新。我怎样才能看到DOM元素的状态?

var app = new Vue({
el: '#app',
data() {
return {
children: {}
}
},
methods: {
fillChildren() {
this.children['id'] = 'child1Id'
console.log(this.children.hasOwnProperty('id')) // This is true
}
}
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
<div @click="fillChildren">Fill children</div>
{{children.hasOwnProperty('id')}} <!-- I want to see true after click -->
</div>

Answer 1

From Reactivity in Depth:

Vue无法检测属性的添加或删除。

您可以使用vm.$set实例方法来绕过此限制:

var app = new Vue({
el: '#app',
data() {
return {
children: {}
}
},
methods: {
fillChildren() {
this.$set(this.children, 'id', 'child1Id')
console.log(this.children.hasOwnProperty('id')) // This is true
}
}
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
<div @click="fillChildren">Fill children</div>
{{children.hasOwnProperty('id')}} <!-- I want to see true after click -->
</div>