解决vue 更改计算属性后select选中值不更改的问题
更新时间：2018年03月02日 15:33:38 作者：ChengYz_
下面小编就为大家分享一篇解决vue 更改计算属性后select选中值不更改的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
先上代码：
//...
<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-router之hash模式和history模式
这篇文章主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue组件详解之使用slot分发内容及Vue组件中slot的用法,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了Vue项目中使用iView组件库设置样式不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
今天小编就为大家分享一篇Vue2.0点击切换类名改变样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本文主要介绍了SpringBoot结合Vue3实现简单的前后端交互,结合实际案例,说明了如何实现前后端数据的交互,具有一定的 参考价值,感兴趣的可以了解一下2023-08-08
这篇文章主要为大家介绍了Vue实现带参数的自定义指令示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了详解polyfills如何按需加载及场景示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了基于Vue SEO的四种方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
vue中使用echarts刷新可以正常渲染但路由跳转不显示的问题解决
在 Vue 中使用 ECharts 组件时,遇到路由跳转后图表不显示的问题可能是因为组件销毁和重新创建的原因,所以本文给大家介绍了vue中使用echarts刷新可以正常渲染但路由跳转不显示问题的解决方法,需要的朋友可以参考下2024-02-02
今天小编就为大家分享一篇解决vue-router 二级导航默认选中某一选项的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论