解决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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
Node.js插件安装图文教程
May 06 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
js实现鼠标拖曳效果
Dec 30 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 printf输出格式使用说明
2010/12/05 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
php判断目录存在的简单方法
2019/09/26 PHP
javascript 获取图片颜色
2009/04/05 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
Sea.JS知识总结
2016/05/05 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
js实现中文实时时钟
2020/01/15 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
python实现交并比IOU教程
2020/04/16 Python
基于Python正确读取资源文件
2020/09/14 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
楼面经理岗位职责范本
2014/02/18 职场文书
员工考核评语大全
2014/04/26 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
2014年度个人总结范文
2015/03/09 职场文书
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android