最近在使用element的el-select时出现了一个奇怪的坑,就是当我选中了下拉框的内容之后但是下拉框中不展示选中的label值,具体代码如下,先展示出现问题的代码

<el-form-item label="推荐产品一:">
  <el-select filterable v-model="detail.recommendProductId" clearable @change="productChange">
    <el-option
      v-for="(item, key) in detail.productionData"
      :key="key"
      :label="item.name"
      :value="item.id"
    ></el-option>
  </el-select>
</el-form-item>

代码中的this.detail是接口中返回的json数据,是一个对象,对象中也包含数组,this.detail.recommendProductId用来绑定v-model的值,同时this.detail.productionData是下拉列表的数据集合,然后在选中列表是触发productChange函数是生效的,但是在选中之后并没有显示出来,产生这种现象的问题是因为这里的v-model绑定的值和option中的值都是变量,都通过接口来获取的,所以就产生了选中之后不显示的问题,解决这个问题的方法可以是将v-model绑定的值我们写成自定的变量值,比如将detail.recommendProductId变成recommendProductId,或者将option中的数据写死也可以解决掉这个问题

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐