Vue中为对象添加字段

本文首发于我的个人博客
本文记录了作者使用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>

Vue中为对象添加字段相关推荐

JS中给对象添加字段
利用for循环给数组对象添加字段 <script>//将objA中className字段添加到person字段每一项中var objA = {classes: [{className: & ...
js给对象添加变量属性 js 更改对象中的属性名数组对象中每个对象添加一个字段-map用法和forEarch用法
js给对象添加变量属性 & js 更改对象中的属性名 & 数组对象中每个对象添加一个字段-map用法和forEarch用法 1.js给对象添加变量属性 1.js创建一个对象或者在原有对 ...
替代微软txt文本编辑器_如何在Microsoft Excel中向对象添加替代文本
替代微软txt文本编辑器 Alternative text (alt text) allows screen readers to capture the description of an obje ...
如何在Microsoft Word中向对象添加替代文本
Alternative text (alt text) allows screen readers to capture the description of an object and read i ...
如何在Mac上的Pages 文稿中为对象添加说明或标题？
我们在使用Pages 文稿时,您可以为大多数对象添加标题或描述性说明,包括绘图.方程.图像.图像画廊.影片.形状(不包括线条).表格.文本框和图表.如果文稿中有成组的对象,您还可以添加可应用到整个组的 ...
java对象添加字段_99.9%的Java程序员都说不清的问题：JVM中的对象内存布局？
在 Java 程序中,我们拥有多种新建对象的方式.除了最为常见的new语句之外,我们还可以通过反射机制.Object.clone方法.反序列化以及Unsafe.allocateInstance 方法来 ...
vue中检测对象和数组值变化的问题
今天工作中遇到改变vue data中某个对象的值,却无法触发视图更新的问题.看了看官方文档,怎么解决的呢? 1.检测对象的变化受现代 JavaScript 的限制(以及废弃 Object.obse ...
vue 修改对象的值视图没有发生改变_在vue中处理对象属性改变视图不更新问题？ - echart...
...图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法,有一定的参考价值,感兴趣的朋友可以看看.以饼状图 ...
vue给html动态添加属性,Vue中怎么动态添加类名？
能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class=" ...

Vue中为对象添加字段

场景与问题

Vue中为对象添加字段相关推荐

最新文章

热门文章