解決vue 更改計(jì)算屬性后select選中值不更改的問(wèn)題
先上代碼：
//...
<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è)問(wèn)題，即將計(jì)算屬性da綁定到v-for指令上，然后再替換源數(shù)據(jù)options，結(jié)果da計(jì)算屬性正確，而selected屬性并沒(méi)有變化。也就是頁(yè)面上的下拉框在非展開情況下的文字并沒(méi)有改變，如下圖：
這里可以看到下拉框的option已經(jīng)更新，然而selected屬性并沒(méi)有隨之同步更新，因?yàn)樗彺媪松洗芜x擇的值。
這里如此設(shè)計(jì)不知是否合理，因?yàn)槲矣眠@種用法用的比較少。
但有問(wèn)題就要解決。在computed中的計(jì)算屬性中增加selected=''，每次更新依賴則重置selected屬性。
以上這篇解決vue 更改計(jì)算屬性后select選中值不更改的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
一文了解vue-router之hash模式和history模式
這篇文章主要介紹了一文了解vue-router之hash模式和history模式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue組件詳解之使用slot分發(fā)內(nèi)容及Vue組件中slot的用法,需要的朋友可以參考下2018-04-04
Vue項(xiàng)目中使用iView組件庫(kù)設(shè)置樣式不生效的解決方案
這篇文章主要介紹了Vue項(xiàng)目中使用iView組件庫(kù)設(shè)置樣式不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
今天小編就為大家分享一篇Vue2.0點(diǎn)擊切換類名改變樣式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡(jiǎn)單的前后端交互
本文主要介紹了SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡(jiǎn)單的前后端交互,結(jié)合實(shí)際案例,說(shuō)明了如何實(shí)現(xiàn)前后端數(shù)據(jù)的交互,具有一定的?參考價(jià)值,感興趣的可以了解一下2023-08-08
Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
詳解polyfills如何按需加載及場(chǎng)景示例詳解
這篇文章主要為大家介紹了詳解polyfills如何按需加載及場(chǎng)景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了基于Vue SEO的四種方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue中使用echarts刷新可以正常渲染但路由跳轉(zhuǎn)不顯示的問(wèn)題解決
在?Vue?中使用?ECharts?組件時(shí),遇到路由跳轉(zhuǎn)后圖表不顯示的問(wèn)題可能是因?yàn)榻M件銷毀和重新創(chuàng)建的原因,所以本文給大家介紹了vue中使用echarts刷新可以正常渲染但路由跳轉(zhuǎn)不顯示問(wèn)題的解決方法,需要的朋友可以參考下2024-02-02
解決vue-router 二級(jí)導(dǎo)航默認(rèn)選中某一選項(xiàng)的問(wèn)題
今天小編就為大家分享一篇解決vue-router 二級(jí)導(dǎo)航默認(rèn)選中某一選項(xiàng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11