解决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: \'选项1\',
          label: \'黄金糕\'
        }, {
          value: \'选项2\',
          label: \'双皮奶\'
        }, {
          value: \'选项3\',
          label: \'蚵仔煎\'
        }, {
          value: \'选项4\',
          label: \'龙须面\'
        }, {
          value: \'选项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指令绑定数据生成option，但今天学习写的时候突然发现一个问题，即将计算属性da绑定到v-for指令上，然后再替换源数据options，结果da计算属性正确，而selected属性并没有变化。也就是页面上的下拉框在非展开情况下的文字并没有改变，如下图：

这里可以看到下拉框的option已经更新，然而selected属性并没有随之同步更新，因为它缓存了上次选择的值。

这里如此设计不知是否合理，因为我用这种用法用的比较少。

但有问题就要解决。在computed中的计算属性中增加selected=\’\’，每次更新依赖则重置selected属性。

以上这篇解决vue 更改计算属性后select选中值不更改的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

解决vue 更改计算属性后select选中值不更改的问题

请登录后发表评论