element-ui的el-select組件中label和value屬性的使用

<el-form-item label="最高學歷" prop="maxDegree">
      <el-select style="width:300px;" v-model="form.maxDegree">
            <el-option v-for="(item,index) in option" 
                      :key="item+index" :label="item.text" 
                      :value="item.id">
            </el-option>
       </el-select>
 </el-form-item>

js

form:{
　　maxDegree:"",           //最高學歷
},
option:[
       {text:"初中及以下",id:"1"},
       {text:"中技",id:"3"},
       {text:"高中",id:"2"},
       {text:"中專",id:"4"},
       {text:"大專",id:"5"},
       {text:"本科",id:"6"},
       {text:"碩士",id:"7"},
       {text:"博士",id:"8"},
       {text:"其他",id:"9"},
],

問題：

有時候我們發現 默認顯示的內容會顯示具體的value值而不是對應的文本，出現這種情況的原因是：將label值 與value弄反了

 

注意事項：

v-model綁定的值與option選項value值對應，

label值為顯示的標簽，如圖所示