背景：在通過接口獲取數據集對象后，根據業務場景需要在數據集對象上增加額外的屬性
data中定義的數據集對象mindData格式示例如下
mindData: [{label:'清醒',value:'清醒'}, {label:'朦朧',value:'朦朧'},{label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'},{label:'譫妄',value:'譫妄'}, {label:'模糊',value:'模糊'}]1) 通過post調用接口獲取minData對象，遍歷添加屬性value和content（方便后續通過v-model設置綁定radio控件的選擇結果值value）
this.$http.post('XXXXXXXXXXXXXXXXXXXXXXXX', {parms:'xxx'}).then(res => {letsel= thissel.mindData= res.datafor(letitemofsel.mindData) {item.value= ''item.content=''}})2) 這里我自定義了radio控件，部分代碼如下
<mt-cell:title="label"class="zm-radio mint-field"><input:placeholder="placeholder"type="text":readonly="!editable"style="margin-right: 14px;"v-model="currentContent"@click="onHandleClick"class="mint-field-core"/><spanclass="mintui mintui-back reset" @click="popupVisible=true"></span><mt-popupclass="zm-radio-popup"position="bottom"v-model="popupVisible"popup-transition="popup-fade":style="{height:popupHeight}"ref="pop"><zm-container><zm-mainref="zmRadioMain"><div@click="popupVisible=false"><mt-radiostyle="width: 100%":title="label"align="right"v-model="currentValue":options="options"></mt-radio></div></zm-main></zm-container></mt-popup></mt-cell>export default{watch: {popupVisible() {this.options= this.dictItemsthis.currentValue= this.valueletheight= this.options.length * 48letmaxHeight= window.innerHeight * 0.5if(height> maxHeight) {this.popupHeight= maxHeight+ 'px'letscrollHeight= maxHeight* maxHeight/ heightthis.$refs.zmRadioMain.setScroll(scrollHeight,window.innerWidth)}},currentValue() {console.log('radio_currentValue:'+ this.currentValue)this.$emit('input',this.currentValue)letcontent= this.contentletlabel= ''for(letitemof this.options) {if(_.isEqual(item.value,this.currentValue)) {label= item.labelbreak}}this.currentContent= content}3) 綁定到自定義的radio控件上
<zm-radiolabel="單選：":editable="false":dict-data="mindData":content.sync="data.content"v-model="data.value"></zm-radio>
賦值的關鍵代碼如下
watch: {popupVisible() {this.options= this.dictItemsthis.currentValue= this.value彈出選項框列表的時候，會把當前文本上的value值賦值給currentValue對象，這樣下拉框就會自動定位顯示原先的選項值，期望達到的效果如下
乍看之下，沒什么問題，運行后發現
點擊下拉框，彈出選項列表，怎么數據沒有通過v-model綁定上去,并且radio的value和lable值一直是空
搗鼓了很久，測試發現通過定義mindRadio對象的方式綁定在zm-radio對象上，顯示效果是能獲得期望結果，那問題很明顯，對象屬性的創建有問題
<zm-radiolabel="單選：":editable="false":dict-data="mindData":content.sync="mindRadio.content"v-model="mindRadio.value"></zm-radio>data() {return{mindRadio: {code:'',value:''}}經過vue官方資料查詢，提供了vue.set方法,通過以下方法解決了設置對象屬性的問題
this.$http.post('XXXXXXXXXXXXXXXXXXXXXXXX', {parms:'xxx'}).then(res => {letsel= thissel.mindData= res.datafor(letitemofsel.mindData) {sel.$set(item,'value','')sel.$set(item,'content','')}})總結原因：其實問題是vue實例對象不允許直接添加屬性或刪除屬性，需要通過set方式更新數據對象。
另一種實現方式，可以采用先給臨時對象tempData添加屬性，再賦值給mindData
以上這篇對VUE中的對象添加屬性就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
