首頁 >web前端 >js教程 >如何解決vue 更改計算屬性後select選取值不更改的問題，具體操作如下

如何解決vue 更改計算屬性後select選取值不更改的問題，具體操作如下

亚连原創: 2018-06-01 16:56:261887瀏覽

下面我就為大家分享一篇解決vue 更改計算屬性後select選取值不更改的問題，具有很好的參考價值，希望對大家有所幫助。

先上程式碼：

//...
<body>
  <p id="qwe">
    <select v-model="selected">
      <option v-for="item in da" :value="item.value">{{item.value}}</option>
    </select>
    <span>{{selected}}</span>
  </p>
  <script>
    var dt = [{
      value: &#39;111&#39;,
      label: &#39;aaa&#39;
    }, {
      value: &#39;222&#39;,
      label: &#39;bbb&#39;
    }, {
      value: &#39;333&#39;,
      label: &#39;ccc&#39;
    }, {
      value: &#39;444&#39;,
      label: &#39;ddd&#39;
    }, {
      value: &#39;555&#39;,
      label: &#39;fff&#39;
    }];
    var vm = new Vue({
      el: &#39;#qwe&#39;,
      data: {
        options: [{
          value: &#39;选项1&#39;,
          label: &#39;黄金糕&#39;
        }, {
          value: &#39;选项2&#39;,
          label: &#39;双皮奶&#39;
        }, {
          value: &#39;选项3&#39;,
          label: &#39;蚵仔煎&#39;
        }, {
          value: &#39;选项4&#39;,
          label: &#39;龙须面&#39;
        }, {
          value: &#39;选项5&#39;,
          label: &#39;北京烤鸭&#39;
        }],
        selected: &#39;&#39;
      },
      computed: {
        da: function () {
          var _self = this;
          return _self.options.filter(function (item) {
            return +item.value.split(&#39;&#39;)[2] > 2;
          });
        }
      }
    })
  </script>
</body>
</html>

上面的程式碼就是採用vue的v-for指令綁定資料產生option，但今天學習寫的時候突然發現一個問題，即將計算屬性da綁定到v-for指令上，然後再替換來源資料options，結果da計算屬性正確，而selected屬性並沒有改變。也就是頁面上的下拉框在非展開情況下的文字並沒有改變，如下圖：

這裡可以看到下拉框的option已經更新，然而selected屬性並沒有隨之同步更新，因為它快取了上次選擇的值。

這裡如此設計不知是否合理，因為我用這種用法用的比較少。

但有問題就要解決。在computed中的計算屬性中增加selected=''，每次更新依賴則重置selected屬性。

上面是我整理給大家的，希望今後對大家有幫助。

webpack 打包壓縮js和css的方法範例

動態載入、移除js/css檔案的範例代碼

webpack vue專案開發環境區域網路存取方法

以上是如何解決vue 更改計算屬性後select選取值不更改的問題，具體操作如下的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何關閉Vue計算屬性自帶的快取功能，具體步驟有哪些？下一篇：如何關閉Vue計算屬性自帶的快取功能，具體步驟有哪些？

看更多