element el-select 动态创建绑定属性，视图不更新之-连环填坑

项目需求是这样的：
1. 在 a组件通过操作页面，请求拿到需要的data，然后将数据存在vuex 中，数据结构为多层嵌套结构大概如下

ceshi:[
    {
      values:[
        {
          value:[
            {id:1,label:'哈哈1'},
            {id:2,label:'哈哈2'},
            {id:3,label:'哈哈3'}
          ]
        },
        {
          value:[
            {id:4,label:'哈哈4'},
            {id:5,label:'哈哈5'},
            {id:6,label:'哈哈6'}
          ]
        }
      ]
    }
  ]

在组件中通过获取vuex中的数据ceshi为数据源，

computed: {
    ...mapGetters(['ceshi'])
  },

然后在b组件中动态渲染数据,因为我需要动态绑定属性所以我在computed中创建动态变量结构

//数据渲染
    <div v-for="(x1,index1) in ceshi" :key="index1+'1'">
      <div v-for="(x2,index2) in x1.values" :key="index2+'2'">
          <el-select  placeholder="请选择" v-model="form[index1].values[index2].value"> //动态绑定属性
            <el-option
              v-for="item in x2.value"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
      </div>
    </div>
//    

computed: {
    ...mapGetters(['ceshi']),    
     form(){     
       return this.ceshi.map((val,index) => {
         let  values = val.values.map((val,index) => {
           let json={value:""}
           return json
         })
          let ojson  = {values};
          return ojson
       })
     }    
  }

发现数据绑定成功，选择框变化数据也会变化，但是页面不改变，视图没有更新，通过在select代码中加入$set方法,也并没有用，视图同样没有更新；查看文档发现发现computer默认没有双向绑定，默认为getter 需要自己写setter函数，但是我发现,因为我的动态数据是我通过vuex 中的数据得来的，我也并没有定义其他的data，所以无法使用setter，于是进行修改如下

 data() {
    return {
      form:[]
  },
created () {
     this.ceshi.forEach((val,index) => {
        let  values = val.values.map((val,index) => {
          let json={value:""}
          return json
        })
        let ojson  = {values};
        this.form.push(ojson)
      })    
  }

结果报错，分析原因应该是，我并没有在a组件操作获取数据，但这个时候created函数运行于是报错了，修改逻辑为通过watch 监听ceshi 数据变化

 ceshi: {
      handler(newValue,oldValue) {
        this.ceshi.forEach((val,index) => {
            let values = val.values.map((val,index) => {
              let json={value:""}
              return json
            })
            let ojson  = {values};
            this.form.push(ojson)
          })
      },
      deep: true
    }

再看效果，发现解决了，记录如下，希望能帮助到您

element el-select 动态创建绑定属性，视图不更新之-连环填坑

猜你喜欢