Vue动态添加属性到data的实现
更新时间：2022年08月05日 11:21:07 作者：饭啊饭°
在vue中请求接口中，一个请求方法可能对应后台两个请求接口，所以请求参数就会有所不同。需要我们先设置共同的参数，然后根据条件动态添加参数属性
一、场景例子
<body>
<div id="app">
<p v-for="(value,key) in item" :key="key">
{{value}}
</p>
<button @click="addProperty">动态添加新属性</button>
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data:{
item:{
oldProperty:"旧属性"
}
},
methods: {
addProperty(){
this.item.newProperty = "新属性";
console.log(this.item);
}
},
})
</script>效果：点击按钮后，输出的结果中有新添加的新属性，但是页面没有显示新属性。
二、原理分析
vue2使用Object.defineProperty实现数据响应式；
const obj = {}
Object.defineProperty(obj, 'foo', {
get() {
console.log(`get foo:${val}`);
return val
},
set(newVal) {
if (newVal !== val) {
console.log(`set foo:${newVal}`);
val = newVal
}
}
})
}- 当访问foo属性，或者设置foo值的时候都能触发setter与getter；
- 但是为obj添加新属性的时候，却无法触发事件属性的拦截
bj.bar = '新属性'
原因是一开始obj的foo属性被设成了响应式数据，而bar是后面新增的属性，并没有通过Object.defineProperty设置成响应式数据
三、解决方案
有三种解决方案：
- Vue.set()
- Object.assign()
- $forcecUpdated()
常用的就是Vue.set()，语法为：Vue.set( target, propertyName/index, value )
<script>
new Vue({
el:'#app',
data:{
item:{
oldProperty:"旧属性"
}
},
methods: {
addProperty(){
Vue.set(this.item,"newProperty","新属性")
console.log(this.item);
}
},
})
</script>
到此这篇关于Vue动态添加属性到data的实现的文章就介绍到这了,更多相关Vue动态添加属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了如何基于vue2 实现图片的拖拽、旋转、鼠标滚动放大缩小等功能。文中的示例代码讲解详细，感兴趣的小伙伴可以尝试一下2022-11-11
这篇文章主要介绍了iView-admin 动态路由问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-10-10
这篇文章主要介绍了vue实现数字动态翻牌的效果（开箱即用）,实现原理是激将1到9的数字竖直排版，通过translate移动位置显示不同数字，本文通过实例代码讲解，需要的朋友可以参考下2019-12-12
详解vuex数据传输的两种方式及this.$store undefined的解决办法
这篇文章主要介绍了vuex数据传输的两种方式 及 this.$store undefined的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
本篇文章主要介绍了vue 1.x 交互实现仿百度下拉列表示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家介绍了vue3响应式实现readonly从零开始教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了在JS中如何同步修改vue中的变量问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue中 $forceUpdate的使用解析，该方案是比较好的一种方式，比如说我们尝试直接给某个object增加一个属性，发现页面上没有效果；直接将length变成0来清空数组，下文详细资料需要的小伙伴可以参考一下2022-04-04
这篇文章主要介绍了Vue3-pinia状态管理,pinia是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以参考下2022-08-08
本文主要介绍了关于Vite项目打包后浏览器兼容性问题的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
最新评论