解决Vue数据更新但视图不更新的问题
vue中改变数据视图不更新在开发中我们处理数据时会遇到数据更新了,但视图并没有更新,这种情况往往是数据嵌套层数过多导致的问题,下面给大家提供一种解决办法。data () {return {obj: {item1: {arr:['苹果', '香蕉', '梨子', '猕猴桃']},item2: {arr:['火龙果', '水蜜桃', '百香果', '脆枣']},
·
vue中改变数据视图不更新
在开发中我们处理数据时会遇到数据更新了,但视图并没有更新,这种情况往往是数据嵌套层数过多导致的问题,下面给大家提供一种解决办法。
data () {
return {
obj: {
item1: {
arr:['苹果', '香蕉', '梨子', '猕猴桃']
},
item2: {
arr:['火龙果', '水蜜桃', '百香果', '脆枣']
},
item3: {
text1: '这个世界如梦如幻,所见皆为幻象。',
text2: '若了境如幻自心所现,则灭妄想三有苦及无知爱业缘。 ',
text3: '醒来吧,梦中的你。'
}
}
}
},
methods: {
change () {
// 例如要改变obj对象中item1里的arr的"梨子"为"柚子"
// 传参依次为 1.需要修改的数组 2. 需要修改的数据的索引 3.新的值
this.$set(obj.item1.arr, 2, '柚子')
// 传参依次为 1.需要修改的对象 2. 需要修改的对象的key 3.新的值
// 例如要改变obj对象中item3的text3的内容
this.$set(obj.item3, 'text3', '我已经觉醒了。')
// 例如要给item3新增一个text4
this.$set(obj.item3, 'text4', '我已经觉醒了,但你还在梦中。')
}
}
更多推荐
已为社区贡献12条内容
所有评论(0)