解决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 相关文章推荐
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
js浏览器html5表单验证
Oct 17 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
React自定义hook的方法
Jun 25 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
计算php页面运行时间的函数介绍
2013/07/01 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
javascript Object与Function使用
2010/01/11 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python3.5安装python3-tk详解
2019/04/26 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
python 用struct模块解决黏包问题
2020/11/07 Python
EJB与JAVA BEAN的区别
2016/08/29 面试题
营销人才自我鉴定范文
2013/12/25 职场文书
优质服务演讲稿
2014/05/14 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
先进典型发言材料
2014/12/30 职场文书
行政复议决定书
2015/06/24 职场文书