vue中修改网络请求数据不能更新视图UI的问题

最新推荐文章于 2022-11-17 09:59:14 发布

杨天福911

最新推荐文章于 2022-11-17 09:59:14 发布

阅读量7.1k

点赞数

分类专栏： Vue 文章标签： vue列表渲染数据不能动态绑定的问题对象属性的添加删除如何绑定UI props中的值给子组件数据绑定无效问题 vue数组之间的赋值和数据绑定

本文链接：https://blog.csdn.net/ytfunnysite/article/details/101443347

版权

Vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

由于 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>