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


Posted in Javascript onMarch 02, 2018

先上代码:

//...
<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属性并没有变化。也就是页面上的下拉框在非展开情况下的文字并没有改变,如下图:

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

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

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

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

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

Javascript 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
jquery实现显示已选用户
Jul 21 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 #Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 #Javascript
vue element-ui table表格滚动加载方法
Mar 02 #Javascript
浅谈React组件之性能优化
Mar 02 #Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 #Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 #Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 #Javascript
You might like
简单解决微信文章图片防盗链问题
2016/12/17 PHP
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
python ---lambda匿名函数介绍
2019/03/13 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
python之yield和Generator深入解析
2019/09/18 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
写给保洁员表扬信
2014/01/08 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
党的群众路线调研报告
2014/11/03 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python