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属性加上就可以了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
使用JSONP主要是目的通过动态创建Script，动态拼接url，进而抓取数据，实现跨域。这篇文章主要介绍了VUE2.0中Jsonp的使用方法（前端）,需要的朋友可以参考下2018-05-05
unplugin-auto-import的配置以及eslint报错解决详解
unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个插件的自动导入,也支持自定义插件的自动导入,是一个功能强大的typescript支持工具,这篇文章主要给大家介绍了关于unplugin-auto-import的配置以及eslint报错解决的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了vue+js实现微信上传图片选择功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
在 Web 应用中,生成二维码是常见的需求,本文介绍如何用 Vue3 和 TypeScript 开发一个二维码生成组件,支持生成图片或 canvas 形式的二维码,并提供丰富的配置选项,感兴趣的小伙伴跟着小编一起来看看吧2024-04-04
这篇文章主要介绍了Vue 401配合Vuex防止多次弹框的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
解决uniapp项目在微信开发工具里打开报错Error:app.json:在项目根目录未找到app.json
这篇文章主要给大家介绍了关于解决uniapp项目在微信开发工具里打开报错Error:app.json:在项目根目录未找到app.json的相关资料,文中通过图文将解决的办法介绍的非常详细,需要的朋友可以参考下2024-03-03
Vue-Router路由是根据不同的url地址展现不同的内容或页面,这篇文章主要给大家介绍了关于Vue3中如何使用Vue Router的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
Webpack和Vite是两种主流的前端构建工具,它们在功能、性能和使用场景上有所不同,Webpack提供丰富的功能和配置,适合大型复杂项目,但可能导致启动和构建速度较慢,Vite基于ES模块,支持快速的热替换,适合小型或中等项目,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了vue watch immediate方法用法详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
本篇文章主要介绍了VUE axios上传图片到七牛的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论