element多选框select下拉框数据回显的问题value.push is not a function

夏小花花

已于 2024-03-06 10:55:20 修改

阅读量1.5k

点赞数 9

分类专栏： Vue javascript 文章标签： vue.js javascript elementui

于 2024-03-06 10:54:03 首次发布

本文链接：https://blog.csdn.net/xiaohua616/article/details/136499274

版权

javascript 同时被 2 个专栏收录

42 篇文章

订阅专栏

Vue

13 篇文章

订阅专栏

作者在使用ElementUI的el-select组件时遇到问题，因v-model绑定的是字符串而非数组，导致下拉框选中但文本框无值。解决方法是将后端返回的string型`wechatObject`转换为数组。一个小错误，大教训：熟悉组件用法可以避免很多困扰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

问题描述

问题描述

今天在使用Element UI el-select组件遇到了一个问题，如下图：
下拉框里的值选中了，但是文本框里没有值

在这里插入图片描述

这是 el-select组件代码,我这里是用了一个多选框，options的值是在后端查询的，form.wechatObject的值是wxid(id)，然后再下拉列表中回显的是nick(name)

经排查发现问题原因是： el-select中的v-model应该要绑定一个数组类型的，但是现在我的form.wechatObjec是后端直接返回过来的，现在是一个string类型的，没有进行处理，所以导致的在文本框中显示不出来，所以要对form.wechatObject的值进行转换一下，转换为数组。
我这个的业务场景是点击修改按钮的时候去查询数据库，然后把弹窗打开，我这里就是在查询完数据库之后，对form.wechatObject值进行转换。

<el-select
  v-model="form.wechatObject"
  @change="isChecked"
  @blur="productSelect"
  clearable
  multiple
  filterable
  placeholder="请选择"
  class="product-input"
  allow-create
>
  <el-option
    v-for="item in options"
    :key="item.wxid"
    :label="item.nick"
    :value="item.wxid"
  >
  </el-option>
</el-select>

下面是将form.wechatObject进行值转换的代码

this.form.wechatObject = this.form.wechatObject.split(',');

唉，兜兜转转总结来说，其实就是一行代码的事情，但是由于对el-select组件的不熟悉，导致走了很多的弯路！！！