解决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查询DBpedia小应用实例学习
Mar 07 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 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
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
vue-loader教程介绍
2017/06/14 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
执行总经理岗位职责
2014/02/03 职场文书
花店创业计划书范文
2014/02/07 职场文书
学校元旦晚会方案
2014/02/19 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
文秘个人求职信范文
2014/04/22 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
专家推荐信怎么写
2015/03/25 职场文书
拉贝日记观后感
2015/06/05 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
《假如》教学反思
2016/02/17 职场文书