脚本宝典收集整理的这篇文章主要介绍了vue 数组和对象渲染问题,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex
中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新。以为是数组更新
的问题,后来又以为是因为vuex
导致的问题. 最后强制刷新组件解决了问题,但是还没有找到根本问题的所在...
push()
、pop()
、shift()
、unshift()
、splice()
、sort()
、reverse()
、filter()
、concat()
方法时,改变数组的同时可以触发视图的变化。(1)直接操作数组的长度;
// Vue.set
this.$set(arr, indexOfITem, newValue)
// Array.PRototyPE.splice
this.arr.splice(indexOfItem, 1, newValue)
(2)利用索引直接设置一个项时,例如:this.arr[indexOfItem] = newValue
this.arr.splice(newLength)
demo如下:
<template>
<div class="demo">
<div class="list-item" v-for="item in arr[0].elements" :key="item.name">{{item.name}}</div>
<div class="change-BTn" @click="changeArr">改变列表的值</div>
</div>
</template>
<script>
export default {
data() {
return {
index: 0,
arr: [{
elements: [{
name: '0'
}, {
name: '1'
}, {
name: '2'
}]
}]
}
},
methods: {
changeArr() {
// 可以改变数组的值
this.arr[0].elements.push({
name: '3'
})
// this.arr[0].elements[1].name = '4' 可以改变数组的值
// this.arr[0].elements[1] = { 无法改变数组的值
// name: '4'
// }
}
}
}
</script>
方法一:this.$set()
方法二:Object.assign()
demo.vue
<template>
<div class="demo">
{{object}}
<div class="change-btn" @click="changeArr">改变列表的值</div>
</div>
</template>
<script>
export default {
data() {
return {
index: 0,
object: {
name: 'haha'
}
}
},
methods: {
changeArr() {
// 方法一:
this.$set(this.object, 'age', 27)
// 方法二:
this.object = Object.assign({}, this.object, {
age: 27
})
// 方法三: ---不可行
this.object.age = '27'
}
}
}
</script>
补充:
this.$forceUpdate()迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
使用 v-if 在切换时,元素及它的绑定数据和组件都会被销毁并重建
https://cn.vuejs.org/v2/api/#...
https://cn.vuejs.org/v2/guide...
以上是脚本宝典为你收集整理的vue 数组和对象渲染问题全部内容,希望文章能够帮你解决vue 数组和对象渲染问题所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。