vue 更改计算属性后select选中值不更改的解决方法
2017-03-25 21:46
756 查看
先上代码:
上面的代码就是采用vue的v-for指令绑定数据生成option,但今天学习写的时候突然发现一个问题,即将计算属性da绑定到v-for指令上,然后再替换源数据options,结果da计算属性正确,而selected属性并没有变化。也就是页面上的下拉框在非展开情况下的文字并没有改变,如下图:
这里可以看到下拉框的option已经更新,然而selected属性并没有随之同步更新,因为它缓存了上次选择的值。
这里如此设计不知是否合理,因为我用这种用法用的比较少。
但有问题就要解决。在computed中的计算属性中增加
//... <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属性并没有变化。也就是页面上的下拉框在非展开情况下的文字并没有改变,如下图:
这里可以看到下拉框的option已经更新,然而selected属性并没有随之同步更新,因为它缓存了上次选择的值。
这里如此设计不知是否合理,因为我用这种用法用的比较少。
但有问题就要解决。在computed中的计算属性中增加
selected='',每次更新依赖则重置selected属性。
相关文章推荐
- 解决vue 更改计算属性后select选中值不更改的问题
- MVC dropdownlist 后端设置select属性后前端依然不能默认选中的解决方法
- vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
- vue中的计算属性的使用和vue实例的方法示例
- 关于vue的使用计算属性VS使用计算方法的问题
- JS更改select内option属性的方法
- flex 1119错误 找不到属性 static 解决方法,编译选项中选中 不启用rsl
- Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
- Openfire更改服务器domain属性后登录不了的解决方法
- 关闭Vue计算属性自带的缓存功能方法
- vue计算属性的使用和vue实例的方法
- jQuery选中select控件 无法设置selected的解决方法
- 在xp中不能查看或更改文件夹的“只读”属性或“系统”属性解决方法
- 文件夹被隐藏,属性无法更改的解决方法
- jquery插件select之chosen选中去掉空格解决方法
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- 【jquery】jquery 在 ie6 下无法设置 select 选中的解决方法
- jQuery在ie6下无法设置select选中的解决方法详解
- 使用mobile jQuery 动态给select下拉添加数据,选中项默认不显示的解决方法。
- 关于vue中watch检测到不到对象属性的变化的解决方法