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官方說明