vue elementUI下拉框值无法选中问题及解决方案

 更新时间:2024年03月20日 10:48:17   作者:一名技术极客  
大家在写系统的时候,会有这样的需求:点击修改后把需要修改的数据放入表单,其中会有下拉单选框、下拉多选框,展示下拉框单选框内的数据只需要将所选id赋值给下拉框绑定的值就可以了,下面给大家分享vue elementUI下拉框值无法选中问题,感兴趣的朋友一起看看吧

vue elementUI下拉框值无法选中问题

大家在写系统的时候,会有这样的需求:点击修改后把需要修改的数据放入表单,其中会有下拉单选框、下拉多选框。

展示下拉框单选框内的数据只需要将所选id赋值给下拉框绑定的值就可以了。在修改的时候,大家会发现下拉框选择不了,出现这问题的原因就是视图更新不够及时,在下拉框绑定一个change事件,写入this.$forceUpdate()就不会出现问题了

<el-form-item label="游戏">
    <el-select v-model="form.gamesId" filterable placeholder="请选择" @change="changeGame">
        <el-option v-for="item in gameList" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
</el-form-item>
this.form.gamesId = res.data.gamesId // 点击修改后请求接口,将值赋给下拉框绑定的变量 这样会有视图更新不及时的问题
changeGame(id){
    this.$forceUpdate() //在下拉框上绑定change事件 更新视图 这样就不会有视图更新的问题
},

多选框。多选框不像单选框只要直接赋值进去就可已,还需要做进一步处理

<el-form-item label="标签" prop="label">
    <el-select v-model="form.label" multiple collapse-tags placeholder="请选择">
         <el-option v-for="item in labels" :key="item.id" :label="item.name" :value="item.name">
        </el-option>
    </el-select>
</el-form-item>
// this.form.label:下拉框绑定值 this.labels:下拉框内所有数据
let arr=[]
this.form.label.forEach(val=>{
    this.labels.forEach(item=>{
        if(val==item.id){
            arr.push(item.name);
        }
    })
})
this.form.label=arr

扩展:

解决element-ui的下拉框有值,点击后却无法选中的问题

出现原因

因为下拉列表的数据是根据输入框的值的变化时行实时调用接口来更新而非不变的,频繁的更新,可能造成点击下拉列表中的某项后,select所绑定的value值无法进行及时的更新,尤其是所绑定的值是对象时(vue不能检测对象属性的变化),更加会造成无法选中的问题。

解决方法

无法及时更新,那么用change事件监听值的变化,调用this.$forceUpdate()手动强制更新,重新渲染。

代码如下

<el-select v-model="value" placeholder="请选择"  @change="change()">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
change(){
      this.$forceUpdate()
  },

参考链接 https://segmentfault.com/a/1190000020744277

到此这篇关于vue elementUI下拉框值无法选中问题的文章就介绍到这了,更多相关vue elementUI下拉框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue打包项目版本号自加的操作步骤

    vue打包项目版本号自加的操作步骤

    项目每次打包后都需要改动项目版本号,这个改动每次都需要在package.json中修改version,比较麻烦,到底有没有一种打包后版本号自加的办法,这篇文章主要介绍了vue打包项目版本号自加的步骤,需要的朋友可以参考下
    2022-09-09
  • 浅谈Vue.js 中的 v-on 事件指令的使用

    浅谈Vue.js 中的 v-on 事件指令的使用

    这篇文章主要介绍了浅谈Vue.js 中的 v-on 事件指令的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue动态绑定background的方法

    vue动态绑定background的方法

    background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • vue中data改变后让视图同步更新的方法

    vue中data改变后让视图同步更新的方法

    这篇文章主要给大家介绍了关于vue中data改变后让视图同步更新的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Vue单文件组件基础模板小结

    Vue单文件组件基础模板小结

    本篇文章主要介绍了Vue单文件组件基础模板小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 使用淘宝镜像cnpm安装Vue.js的图文教程

    使用淘宝镜像cnpm安装Vue.js的图文教程

    今天小编就为大家分享一篇使用淘宝镜像cnpm安装Vue.js的图文教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05
  • Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建过程

    Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建过程

    Mock.js是一个模拟数据的生成器,用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率,这篇文章主要介绍了Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建,需要的朋友可以参考下
    2023-09-09
  • Vuejs监听vuex中值的变化的方法示例

    Vuejs监听vuex中值的变化的方法示例

    这篇文章主要介绍了Vuejs监听vuex中值的变化的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue-Router安装过程及原理详细

    vue-Router安装过程及原理详细

    路由是网络工程里面的专业术语,就是通过互联把信息从源地址传输到目的地址的活动。本质上就是一种对应关系。分为前端路由和后端路由。小编将再下面文章为大家做详细介绍,感兴趣的小伙伴请和小编一起来学习吧
    2021-09-09
  • vue中el-tree 横向滚动条的实现

    vue中el-tree 横向滚动条的实现

    本文详细介绍了在Vue框架中使用el-tree组件创建横向滚动条的方法,通过代码示例和步骤说明,帮助开发者理解和实现横向滚动功能,感兴趣的可以了解一下
    2024-09-09

最新评论