解决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 相关文章推荐
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 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遍历XML文档所有节点的方法
2015/03/12 PHP
php解析xml方法实例详解
2015/05/12 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
React组件refs的使用详解
2018/02/09 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
python实现ipsec开权限实例
2014/11/11 Python
JSON Web Tokens的实现原理
2017/04/02 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
python中可以声明变量类型吗
2020/06/18 Python
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
机关单位人员学雷锋心得体会
2014/03/10 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
日语专业求职信
2014/07/04 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
初中班主任工作随笔
2015/08/15 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
pandas取dataframe特定行列的实现方法
2021/05/24 Python
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python