解决vue 更改计算属性后select选中值不更改的问题
2018-03-02 15:33
561 查看
先上代码:
//... <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选中值不更改的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue 更改计算属性后select选中值不更改的解决方法
- Vue 学习笔记 — css属性计算的问题
- jsp中select标签解决默认选中问题
- vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
- vue中计算属性computed的getter setter问题
- vue计算属性时v-for处理数组时遇到的一个bug问题
- 解决vue数组中对象属性变化页面不渲染问题
- MVC dropdownlist 后端设置select属性后前端依然不能默认选中的解决方法
- 解决vue中对象属性改变视图不更新的问题
- 关于vue的使用计算属性VS使用计算方法的问题
- RichTextEditor控件选中的字符和根据控件属性selection得到的字符存在差异的问题及解决办法
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- RichTextEditor控件选中的字符和根据控件属性selection得到的字符存在差异的问题及解决办法
- Vue2.0 解决watch对象属性变化监听不到问题
- 解决我的开源代码里面的前一篇后一篇的跳页问题,由于时间关系我不发图了,存储过程没有更改,我改进了一下报错功能,用来重新定义属性
- bootstrap-select默认选中问题解决
- 针对JSP下拉框select无法根据ID更改disable属性的问题
- 关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
- 使用jQuery设置disabled属性与移除disabled属性解决select只读不能传值问题
- 解决vue select当前value没有更新到vue对象属性的问题