vue中修改网络请求数据不能更新视图UI的问题
由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:var vm = new Vue({data: {a: 1}})// `vm.a` 现在是响应式的vm.b = 2// `vm.b` 不是响应式的使用 vm.$set 实例方法 在一个数组的对象中增加一个children数组this.$set(this.data[i], 'childr...
·
由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
使用 vm.$set 实例方法 在一个数组的对象中增加一个children数组
this.$set(this.data[i], 'children', list)
this.$set(改变一个对象的值)
例如for循环一个json数组,给json对象gradeList[i]新增一个choose的字段,并且数据更新后可以动态绑定和更新UI的写法
for(let i=0;i<self.gradeList.length;i++){
self.$set(self.gradeList[i],'choose',false)
}
props中参数更新UI
- 从父级容器拿回的数据可以在props中接受,但是要使用这个数据去更新UI就不行了,原因同上,例如我们props中接受一个数组,需要用这个数组中的数据去更新子组件的UI, vue的数据双向绑定必须数据要在data{}中定义 ,所以我们需要在data中定义一个空的数组去接受props中的数组
data() {
return {
gradeListGet:[]
}
},
mounted(){
for(let i= 0;i<this.gradeList.length;i++){
this.$set(this.gradeListGet,i,this.gradeList[i])
}
},
- 使用赋值过的gradeListGet双向绑定props中的视图数据
<div class="list">
<div v-for="(item,index) in gradeListGet" :key="index">
<div class="grade_item" :class="{grade_item_yellow:item.choose} " @click="select_grade(index)">
<p class="text_grade">{{item.label}}</p>
</div>
</div>
</div>
更多推荐
已为社区贡献14条内容
所有评论(0)