element-ui中的el-select下拉框选中不显示问题

最近在使用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中的数据写死也可以解决掉这个问题