先上代碼:
創(chuàng)新互聯(lián)建站基于分布式IDC數(shù)據(jù)中心構(gòu)建的平臺(tái)為眾多戶提供中國(guó)電信成都樞紐中心 四川大帶寬租用 成都機(jī)柜租用 成都服務(wù)器租用。
//... <body> <div id="qwe"> <select v-model="selected"> <option v-for="item in da" :value="item.value">{{item.value}}</option> </select> <span>{{selected}}</span> </div> <script> var dt = [{ value: '111', label: 'aaa' }, { value: '222', label: 'bbb' }, { value: '333', label: 'ccc' }, { value: '444', label: 'ddd' }, { value: '555', label: 'fff' }]; var vm = new Vue({ el: '#qwe', data: { options: [{ value: '選項(xiàng)1', label: '黃金糕' }, { value: '選項(xiàng)2', label: '雙皮奶' }, { value: '選項(xiàng)3', label: '蚵仔煎' }, { value: '選項(xiàng)4', label: '龍須面' }, { value: '選項(xiàng)5', label: '北京烤鴨' }], selected: '' }, computed: { da: function () { var _self = this; return _self.options.filter(function (item) { return +item.value.split('')[2] > 2; }); } } }) </script> </body> </html>
上面的代碼就是采用vue的v-for指令綁定數(shù)據(jù)生成option,但今天學(xué)習(xí)寫的時(shí)候突然發(fā)現(xiàn)一個(gè)問題,即將計(jì)算屬性da綁定到v-for指令上,然后再替換源數(shù)據(jù)options,結(jié)果da計(jì)算屬性正確,而selected屬性并沒有變化。也就是頁面上的下拉框在非展開情況下的文字并沒有改變,如下圖:
這里可以看到下拉框的option已經(jīng)更新,然而selected屬性并沒有隨之同步更新,因?yàn)樗彺媪松洗芜x擇的值。
這里如此設(shè)計(jì)不知是否合理,因?yàn)槲矣眠@種用法用的比較少。
但有問題就要解決。在computed中的計(jì)算屬性中增加selected='',每次更新依賴則重置selected屬性。
以上這篇解決vue 更改計(jì)算屬性后select選中值不更改的問題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持創(chuàng)新互聯(lián)。
分享標(biāo)題:解決vue更改計(jì)算屬性后select選中值不更改的問題
分享鏈接:http://muchs.cn/article16/jchpdg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營(yíng)銷推廣、做網(wǎng)站、外貿(mào)建站、標(biāo)簽優(yōu)化、電子商務(wù)、品牌網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)