本文首發於我的個人博客
本文記錄了作者使用Vue.js，並且在前端中爲對象添加字段時遇到的坑點。
場景與問題
從後端拿到數據之後，可能爲了渲染時的方便，想要在對象裏添加一些字段，而後直接在渲染時引用
直觀上實現這種功能可以直接使用原生的js語法，抽象出來，可以用如下的代碼段表示(爲了複製就可以演示，沒有組件化)
但是如下代碼是有問題的，obj.newField不能被渲染出來
<!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’)
所以上述代碼應該改成
<!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>