Vue select 绑定动态变量

概述

• 根据后台的数据生成多个select，由于数据的数量不定，所以v-model绑定的变量名也不定。所以通过数据的id进行变量拼接。页面能够成功渲染，但是当进行下拉框的选值时，组件不刷新，选中的结果并没有展示。

Code

<el-form-item v-for="item in line" :key="item.id" :label="item.lineName">
	<el-select v-model="editData['line_' + item.id]" placeholder="请选择" multiple size='medium' class="handle-input mr10">
        <el-option
            v-for="item in userOptions"
            :key="item.id"
            :label="item.username"
            :value="item.id">
        </el-option>
    </el-select>
</el-form-item>

其中line为后台传回的数组。editdata是声明的对象。

 data() {
   return{
        editData:{
            work_team_id:'',
            work_time:'',
        }，
        line:[],
    }
},

由于我们需要进行变量的动态拼接，所以不能使用“对象.属性”这种语法，使用中括号[]可以方便我们进行属性名的动态拼接。因为属性名并不能提前知道，所以editData中不能提前声明变量。而这就是问题的关键所在。

问题

• 由于v-model绑定的值没有声明，所以组件渲染后，当进行下拉选择时，选项的值并没有显示在组件中。但是输出结果时，值已经被选中了。也就是说，能够选到值，但页面上组件无响应。
• 如果假定我们拼接的id为[1,2,3] ，所以变量名为line_1, line_2, line_3 。在editData中依次声明这些变量后，组件显示正常。

结论

• el-select组件需要绑定明确的变量，如果变量没有提前声明，则组件选择时界面将会无响应。

解决方案

• 在line数组取回时，给editData进行赋值。

  result.data.forEach(item=>{
  	 this.editData["line_" + item.id] = [];
  })

由于我们的select支持多选，所以默认初始化为空数组。然而，这样并没有卵用。

• 行百里者半九十。到这里已经接近成功了，只是我们的打开方式不对。

  result.data.forEach(item=>{
      this.$set(this.editData,"line_" + item.id, [])
   })

这样设置后，完美解决了问题。

原理

按照官方说明，在初始化的时候，会生成属性的getter、setter。通过setter函数的调用，从而触发组件更新。而直接赋值，并没有setter函数的触发。具体原因参见vue官方说明