解決vue 更改計(jì)算屬性后select選中值不更改的問題

更新時(shí)間：2018年03月02日 15:33:38 作者：ChengYz_

下面小編就為大家分享一篇解決vue 更改計(jì)算屬性后select選中值不更改的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

先上代碼：

//...
<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選中值不更改的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

一文了解vue-router之hash模式和history模式
這篇文章主要介紹了一文了解vue-router之hash模式和history模式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-05-05
vue組件詳解之使用slot分發(fā)內(nèi)容
這篇文章主要介紹了vue組件詳解之使用slot分發(fā)內(nèi)容及Vue組件中slot的用法,需要的朋友可以參考下
2018-04-04
Vue項(xiàng)目中使用iView組件庫設(shè)置樣式不生效的解決方案
這篇文章主要介紹了Vue項(xiàng)目中使用iView組件庫設(shè)置樣式不生效的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue2.0點(diǎn)擊切換類名改變樣式的方法
今天小編就為大家分享一篇Vue2.0點(diǎn)擊切換類名改變樣式的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡單的前后端交互
本文主要介紹了SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡單的前后端交互,結(jié)合實(shí)際案例,說明了如何實(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如何按需加載及場景示例詳解
這篇文章主要為大家介紹了詳解polyfills如何按需加載及場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
基于Vue SEO的四種方案(小結(jié))
這篇文章主要介紹了基于Vue SEO的四種方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
vue中使用echarts刷新可以正常渲染但路由跳轉(zhuǎn)不顯示的問題解決
在?Vue?中使用?ECharts?組件時(shí),遇到路由跳轉(zhuǎn)后圖表不顯示的問題可能是因?yàn)榻M件銷毀和重新創(chuàng)建的原因,所以本文給大家介紹了vue中使用echarts刷新可以正常渲染但路由跳轉(zhuǎn)不顯示問題的解決方法,需要的朋友可以參考下
2024-02-02
解決vue-router 二級導(dǎo)航默認(rèn)選中某一選項(xiàng)的問題
今天小編就為大家分享一篇解決vue-router 二級導(dǎo)航默認(rèn)選中某一選項(xiàng)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11