AI编程助手
AI免费问答

如何解决vue 更改计算属性后select选中值不更改的问题,具体操作如下

亚连   2018-06-01 16:56   2026浏览 原创

下面我就为大家分享一篇解决vue 更改计算属性后select选中值不更改的问题,具有很好的参考价值,希望对大家有所帮助。

先上代码:

//...

  <p>
    <select>
      <option>{{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>

前端入门到VUE实战笔记:立即学习
>在学习笔记中,你将探索 前端 的入门与实战技巧!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。