vue elementUI select下拉框设置默认值(赋值)失败的解决
elementUI select下拉框设置默认值
要为select下拉框设定默认值，只需要把 v-model 绑定的值和你想要选中 option 的 value 值设置一样即可。
下面上代码：
html部分代码：
<el-select v-model="valuetype" @change="changetype">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>script部分代码：
export default {
data() {
return {
options: [
{
value: 'all',
label: 0
},
{
value: 'model',
label: 1
},
{
value: 'machine',
label: 2
}
],
valuetype: 0,
};
},
}所以把 v-model 绑定的 valuetype 设置为 和你想要选中 option 的 value 值设置一样，想要设置 “全部”那个选项，所以 设置成对应的value 为0。（注意：这里的0是数字类型，不是字符串）
在这里已经设置为 默认的为 全部 选项了。
关于element select框默认值赋值不成功问题，
注意两点：
1、v-model里面的数据和遍历出来value值数据类型不一样。（例：item.provinces类型是number，province类型是String。类型不一样导致赋值不成功）
2、遍历数据和赋值的先后顺序，必须保证数据先遍历后赋值。
ElementUI Select设置默认值更改选择后值不改变
使用 ElementUI 的 Select 选择器选择了其他选择值，框内的值没有改变，还是显示原来的值，但是绑定的id值变了
解决方案
在选择器的值发生改变时刷新选择器组件:@change=“$forceUpdate()”
<el-select v-model="Value" placeholder="请选择" @change="$forceUpdate()" > <el-option v-for="item in List" :key="item.id" :label="item.name" :value="item.id" /> </el-select>
注意：
我查找了下绑定值没变的原因是因为我绑定的value值在data中没有定义才会出现这种问题，如果绑定的是对象的话，比如绑定的是obj.value，并且data中已经定义了，还出现了绑定值不变的情况，说明在代码编辑的过程中把obj重新赋值了，赋的值中没有value属性，也就是说把value属性给干掉了，所以会出现绑定值不变的情况，所以要做的就是在代码中把value属性加上就可以了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 实现websocket发送消息并实时接收消息,项目结合vue脚手架和websocket来搭建，本文给大家分享实例代码，需要的朋友可以参考下2019-12-12
这篇文章主要为大家介绍了vue封装form表单组件拒绝重复写form表单的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
vue2响应式原理之Object.defineProperty()方法的使用
这篇文章主要介绍了vue2响应式原理之Object.defineProperty()方法的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要讲解Vue3 集成HTTP库axios的相关内容，本文讲围绕如何利用Vue3 集成HTTP库axios的相关资料展开文章,需要的朋友可以参考一下，希望对你有所帮助2021-10-10
这篇文章主要介绍了Vue使用Swiper的案例详解，主要包括引入swiper,创建轮播图组件CarouselContainer.vue的详细代码，本文给大家介绍的非常详细，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Antd下拉选择,自动匹配功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
众所周知Axios是一个基于promise的HTTP库,可以用在浏览器和 node.js中,下面这篇文章主要给大家介绍了关于vue2中使用axios及axios拦截器的配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了深入理解Vue 单向数据流的原理，详细的介绍了Vue 单向数据流的原理和使用，具有一定的参考价值，有兴趣的可以了解一下2017-11-11
这篇文章主要介绍了详解vue-resource promise兼容性问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
Vue项目保持element组件同行,设置组件不自动换行问题
这篇文章主要介绍了Vue项目保持element组件同行,设置组件不自动换行问题。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
最新评论