解決vue 更改計算屬性后select選中值不更改的問題
更新時間：2018年03月02日 15:33:38 作者：ChengYz_
下面小編就為大家分享一篇解決vue 更改計算屬性后select選中值不更改的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
先上代碼：
//...
<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í)寫的時候突然發(fā)現(xiàn)一個問題，即將計算屬性da綁定到v-for指令上，然后再替換源數(shù)據(jù)options，結(jié)果da計算屬性正確，而selected屬性并沒有變化。也就是頁面上的下拉框在非展開情況下的文字并沒有改變，如下圖：
這里可以看到下拉框的option已經(jīng)更新，然而selected屬性并沒有隨之同步更新，因?yàn)樗彺媪松洗芜x擇的值。
這里如此設(shè)計不知是否合理，因?yàn)槲矣眠@種用法用的比較少。
但有問題就要解決。在computed中的計算屬性中增加selected=''，每次更新依賴則重置selected屬性。
以上這篇解決vue 更改計算屬性后select選中值不更改的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue element 中的table動態(tài)渲染實(shí)現(xiàn)（動態(tài)表頭）
這篇文章主要介紹了vue element 中的table動態(tài)渲染實(shí)現(xiàn)（動態(tài)表頭），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)方法
這篇文章主要給大家介紹了el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)的相關(guān)資料,每個表單el-form由多個表單域el-form-item組成,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了VUE v-bind 數(shù)據(jù)綁定,簡單點(diǎn)來說就是對 HTML 中的元素，我們可以使用 v-bind 來進(jìn)行綁定和動態(tài)的數(shù)據(jù)輸出，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
element使用自定義icon圖標(biāo)的兩種解決方式
因?yàn)榘惭b原型圖設(shè)計實(shí)現(xiàn)頁面,在element自帶的圖標(biāo)庫好像沒有,所以按鈕的圖標(biāo)icon需要自定義,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的兩種解決方式,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue2.0 路由模式mode="history"的作用，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
本文主要介紹了nuxt3中server routes的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
本篇文章通過實(shí)例給大家分析了Vue.js中router傳參的相關(guān)知識點(diǎn)，對此有興趣的朋友參考學(xué)習(xí)下。2018-04-04
這篇文章主要介紹了vue多次打包后出現(xiàn)瀏覽器緩存的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue 中 template 有且只能一個 root的原因解析(源碼分析)
這篇文章主要介紹了Vue 中 template 有且只能一個 root的原因解析,本文從源碼角度分析給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要介紹了Vue中的自定義指令的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-12-12