本文记录了作者使用Vue.js，并且在前端中为对象添加字段时遇到的坑点。
场景与问题
从后端拿到数据之后，可能为了渲染时的方便，想要在对象里添加一些字段，而后直接在渲染时引用
直观上实现这种功能可以直接使用原生的js语法，抽象出来，可以用如下的代码段表示(为了复制就可以演示，没有组件化)
但是如下代码是有问题的，obj.newField不能被渲染出来
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<body>
<div id="app">
{{ obj.newField }}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data : {
obj : {},
},
created() {
obj.newField = "newData"
}
})
</script>
</html>
|
正确的做法是使用Vue.set，因为在Vue的官方文档里有如下的表述
因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)
所以上述代码应该改成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<body>
<div id="app">
{{ obj.newField }}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data : {
obj : {},
},
created() {
Vue.set(obj, "newField", "newData")
}
})
</script>
</html>
|