Vue中为对象添加字段
本文首发于我的个人博客本文记录了作者使用Vue.js,并且在前端中为对象添加字段时遇到的坑点。场景与问题从后端拿到数据之后,可能为了渲染时的方便,想要在对象里添加一些字段,而后直接在渲染时引用直观上实现这种功能可以直接使用原生的js语法,抽象出来,可以用如下的代码段表示(为了复制就可以演示,没有组件化)但是如下代码是有问题的,obj.newField不能被渲染出来<!DOCTYPE html
·
本文首发于我的个人博客
本文记录了作者使用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>
更多推荐
已为社区贡献1条内容
所有评论(0)