Vue绑定对象与数组变量更改后无法渲染问题解决
项目场景：
在页面显示上有一个<ul>标签，我们需要动态进行列表数据的展示，而由于我们的页面上除了列表值，还有其他的值要进行展示，因此列表数据的数据结构是某个对象下面的数组，在动态修改数据后发现没有进行自动渲染。
问题描述：
在点击按钮“click me!”时虽然数据有变化且在控制台进行了输出，但是列表数据并没有发生渲染。
代码如下：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<button @click="pushDataToDataList">click me!</button>
<ul>
<li v-for="(item, i) in form.dataList" :key="item">
{{ i + ":" + item }}
</li>
</ul>
</div>
<script>
let app = new Vue({
data: function() {
return {
form: {}
}
},
methods: {
pushDataToDataList() {
if (this.form.dataList == null) {
this.form.dataList = []
}
this.form.dataList.push("abc" + this.form.dataList.length)
console.log(this.form.dataList)
}
}
}).$mount('#app')
</script>
原因分析：
在查阅了官方文档后我们发现下面这段话
由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。
- 对于对象：Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在
data对象上存在才能让 Vue 将它转换为响应式的。- 对于数组：Vue 不能检测以下数组的变动：
- 当你利用索引直接设置一个数组项时，例如：
vm.items[indexOfItem] = newValue- 当你修改数组的长度时，例如：
vm.items.length = newLength
原因到这里就明了了，我们的数据没有进行渲染是因为在一开始，data下的form中就没有dataList这个属性，因此在后续即使该值产生了变化，Vue也就无法检测到它的改变。而且不仅仅是对数组，即使是js对象也是一样的。除此之外，直接按下标修改数组的元素，也不会触发视图渲染。
会触发数组渲染的有以下数组方法：
- push(element) // 在数组末尾添加元素
- pop() // 删除数组最后一个元素并将其返回
- shift() // 删除数组第一个元素并将其返回
- unshift(ele1, ele2, …, eleN) // 向数组的开头添加一个或更多元素，并返回新的长度
- splice(start, deleteCount?, …item) // 删除数组中的元素并在该元素所在位置替换为新元素
- sort() // 对数组进行排序，会修改数组元素的位置
- reverse() // 倒转数组元素，会修改数组元素的位置
解决方案：
1.在data下的form对象中，设置dataList属性。由于前端在对数据进行处理时就知道代码的结构是什么，提前设置好了也便于后续的开发理解。建议使用
data: function() {
return {
form: {
dataList: null
}
}
}
2.使用this.$set()方法
pushDataToDataList() {
if (this.form.dataList == null) {
// 先在form下设置下dataList属性
this.$set(this.form, 'dataList', [])
}
this.form.dataList.push("abc" + this.form.dataList.length)
console.log(this.form.dataList)
}
参考链接
到此这篇关于Vue绑定对象与数组变量更改后无法渲染问题解决的文章就介绍到这了,更多相关Vue绑定对象与数组变量更改后无法渲染问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue单页面应用中实现Markdown渲染
之前渲染 Markdown 的时候, 笔者使用的是 mavonEditor 的预览模式, 使用起来比较爽, 只需要引入组件即可, 但是在最近的开发中, 遇到了困难. 主要问题在于作为单页面应用, 站内链接必须是使用 router-link 跳转, 如果使用 mavonEditor 默认渲染的 a 标签, 就会重新加载页面, 用户体验较差. 动态渲染 想要实现在前端动态地根据用户内容渲染router-link , 需要使用动态渲染, 根据 官方文档, 直接修改vue.config.js 即可: /
-
详解vue3中渲染函数的非兼容变更
目录 渲染函数API变更 Render函数参数 渲染函数签名更改 VNode Props 格式化 slot统一 移除$listeners $attrs现在包括class和style 渲染函数API变更 此更改不会影响到<template>用户 h现在全局导入,而非作为参数传递给渲染函数 渲染函数参数更改为在有状态组件和函数组件之间更加一致 vnode现在又一个扁平的prop结构 Render函数参数 // 2.0 渲染函数 export default { render(h) { return
-
浅谈vue首次渲染全过程
目录 1.vue初始化 vue入口文件 完整版和运行时版本的区别 1.1.src/core/instace/index.js 1.2.src/core/index.js 1.3.src/platforms/web/runtime/index.js 1.4.src/platforms/web/entry-runtime-with-compiler.js 1.5.vue初始化总结 2.vue构造函数执行 2.1.beforeCreate钩子 2.2.created钩子 2.3.$mount函数 2.
-
vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航
早就实现了功能,但是发现点击的时候,选中的菜单项背景色会变白,周五时候仔细观察了一下,发现并不是调整样式的问题,而是选项没有被选中,于是好好研究了一下组件递归这块,总结记录一下心路历程 一.概念 递归:递归其实说白了,就是自己调用自己,样子就像是套娃一个套一个的,小时候玩过一个游戏汉诺塔就是利用的递归原理: 函数递归:函数利用函数名还调用自己 组件递归:所以组件递归利用的是vue组件中的name属性来实现的 二.需求 实现可折叠动态渲染多级侧边栏导航 三.分析 1.观察到侧边栏导航是一级一级的,
-
vue的ssr服务端渲染示例详解
为什么使用服务器端渲染 (SSR) 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面. 请注意,截至目前,Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引.在这里,同步是关键.如果你的应用程序初始展示 loading 菊花图,然后通过 Ajax 获取内容,抓取工具并不会等待异步完成后再行抓取页面内容.也就是说,如果 SEO 对你的站点至关重要,而你的页面又是异步获取内容,则你可能需要服务器端渲染(SSR)解决此问题. 更快的内容到达时间 (ti
-
Vue绑定对象与数组变量更改后无法渲染问题解决
项目场景: 在页面显示上有一个<ul>标签,我们需要动态进行列表数据的展示,而由于我们的页面上除了列表值,还有其他的值要进行展示,因此列表数据的数据结构是某个对象下面的数组,在动态修改数据后发现没有进行自动渲染. 问题描述: 在点击按钮"click me!"时虽然数据有变化且在控制台进行了输出,但是列表数据并没有发生渲染. 代码如下: <script src="https://unpkg.com/vue/dist/vue.js"></s
-
vue 绑定对象,数组之数据无法动态渲染案例详解
项目场景: 黑马vue项目管理实战,获取商品分类,展开栏的标签页中修改修改数据属性 问题描述: 在本该点击+new tag这个标签页时弹出一个input框让用户输入需要添加的属性 结果点击时却不能立马渲染 async getParametersList() { this.cat_id = this.currentSelect[this.currentSelect.length - 1]; const { data: res } = await this.$http.get( `categorie
-
解决vue 绑定对象内点击事件失效问题
突然的发现某段 html 代码中点击事件失效了. 仔细观察才发现,这段代码内的元素都在 vue 绑定对象中. 因此失效. 解决办法是将绑定对象内的元素点击事件换成 v-on:click. 以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
vue检测对象和数组的变化分析
在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态.可以直接在子组件修改对象或数组,但是并不会数据改变就会引起变化. 检测对象变化 1.不能检测到对象属性的添加或删除 var vm = new Vue({ data:{ data111:{ a = 1 } } }) data111.a = 2;//这个可以引起变化 但data111.b = 2:和vm.b = 2这个不能检测到变化 需要用 Vue.set(o
-
vue改变对象或数组时的刷新机制的方法总结
Vue数据响应原理 官方的解释很清晰: 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因. 用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改
-
vue 避免变量赋值后双向绑定的操作
如: this.list = this.list2, 结果在list改变后 list2也改变,这不是我们想要的效果 第一种: 利用 JSON.parse 和 JSON.stringify this.list= JSON.parse( JSON.stringify(this.list2) ) 第二种: ES6 的解析语法 this.list= { ...this.list2} this.arr= [...this.arr2] 补充知识:解决vue中v-model绑定的变量赋值给了另一个变量后,两个
-
vue2之响应式双向绑定,在对象或数组新增属性页面无响应的情况
目录 vue2响应式双向绑定,在对象或数组新增属性页面无响应 问题描述 解决方法 vue2实现响应式数据 JS中的对象属性 利用Object.defineProperty()进行数据劫持 与标签联动 v-model的实现 总结 vue2响应式双向绑定,在对象或数组新增属性页面无响应 问题描述 vue2 中可以将数据与视图进行绑定,修改 data 对象的属性值将引起对应视图的改变. Vue2的数据视图绑定是通过JS特性这一语法实现,其使用中存在数据属性丢失的这 一 bug,主要针对 对象或数组 属
-
vue data对象重新赋值无效(未更改)的解决方式
vue存在一个比较深的问题就是data中的属性对象如果在初始化的时候为{},那么后面在方法用普通的js语法赋值会无效 这里是data data() { return { model: {} }; } 这里是方法里的普通赋值 afterUpload(response) { this.model.icon = response.url; } 普通方法会无效,需要使用vue提供的方法重新显示声明 afterUpload(response) { this.$set(this.model,'icon',r
-
vue $set 实现给数组集合对象赋值
vue $set 数组集合对象赋值 在vue自定义数组对象集合中,想要给每个数组对对象再添加一个属性和值. // data定义一个集合对象 responseData:[ {'id':'1','name':'女装','price':115,'num':1,'pic':'../static/img/1.jpg'}, {'id':'2','name':'男装','price':110,'num':1,'pic':'../static/img/2.jpg'}, {'id':'3','name':'童装'
-
vue中的循环遍历对象、数组和字符串
目录 vue循环遍历对象.数组和字符串 1.循环遍历对象 2.循环遍历数组 3.循环遍历字符串 vue循环遍历,指令v-for 1.循环遍历 2.v-for遍历数组 3.v-for遍历对象 4.v-for使用中添加key vue循环遍历对象.数组和字符串 1.循环遍历对象 1.1vue 在html里面循环遍历对象 v-for=" (val, key , i) in dimItemMap" :key="key" val-每一项 key -key值 i-第几个 <