vuejs2.0的element-ui组件select选择器无法显示选中的内容

Question

1、vuejs2.0的element-ui组件select选择器无法显示选中的内容

2、`<template>
<el-select v-model="value4" clearable placeholder="请选择">

<el-option
  v-for="item in options"
  :label="item.label"
  :value="item.value">
</el-option>

</el-select>
</template>

<script>
export default {

data() {
  return {
    options: [{
      value: '选项1',
      label: '黄金糕'
    }, {
      value: '选项2',
      label: '双皮奶'
    }, {
      value: '选项3',
      label: '蚵仔煎'
    }, {
      value: '选项4',
      label: '龙须面'
    }, {
      value: '选项5',
      label: '北京烤鸭'
    }],
    value4: ''
  }
}

}
</script>`

3、官网实现是没有问题的，离开了官网的平台就出现问题，在GitHub上下载了一个demo也出现了相同的情况。

4、请踩过坑的小伙伴帮忙指导下。。。

Answer 1

Element 1.3.0 将仅兼容 Vue 2.3.0 及以上版本

Answer 2

升级了Element 1.3.0，Vue 2.3.0 后这个问题解决了，谢谢大家！

Answer 3

楼1 楼2 的方法是正确的，我也遇到了相同的问题，版本换了以后，就没问题了。

Answer 4

我也遇到类似问题了,用最新的https://unpkg.com/element-ui@...，https://unpkg.com/element-ui@...，在vue2.2.1正常了

Answer 5

应该是版本问题，刚踩完坑

Answer 6

我遇到了同样的问题，已经换了vue版本到2.3.3，elementUI到1.3.5，
我的选择器是放在一个dialog里的，我还在选择器外面另外绑定显示这里的值，显示也不会改变
不过dialog提交的时候，这个值就能改到我选中的值上了

我的另一个页面里用了类似的代码，显示没有问题

不知道出bug的代码要改哪里才好

补充：
前面说了dialog提交的时候，这个值能显示出改到选中的值上，通过后台也能看到，选择器已经把值赋给了对应的data变量，但是界面没有自动变化
也许是dialog里form其它部分的代码影响到了这里，虽然不应该有
我现在暂时的处理办法是，在el-select这里设了v-if/v-else
而给v-if/v-else的判断参数，设定周期进行循环更改，从而触发界面的变化，实现选择器里显示值的更新

Answer 7

Answer 8

我也遇到了同样的问题
是表格编辑弹窗 弹出框要预填充表格里的数据
使用row里面的数据赋值到el-select v-model里
`
//template HTML 部分
<el-form-item>

<el-select @visible-change="selectChange" v-model="field.compareType" placeholder="请选择类型">
  <el-option label="大于" value="gt"></el-option>
  <el-option label="小于" value="lt"></el-option>
  <el-option label="等于" value="eq"></el-option>
  </el-select>

</el-form-item>

//js 方法

methods: {

  selectChange(val) {
    console.log(val)// 展开true || 收起false
    //主要看这里
    if(this.content && this.content.length > 0 && !val) {
      let selectFieldList = []
      for(let i in this.content) {
        for(let j in this.formLabelAlign.fieldList)
          if(this.content[i].fieldName == this.formLabelAlign.fieldList[j].fieldName) {
            selectFieldList.push(this.content[i])
          }
      }
      this.formLabelAlign.fieldList = selectFieldList
    }

  },
...

//总结：就是在触发select 的change事件后重新赋值 v-model 已达到重新绑定的效果，在好多编辑弹框情景下基本能解决问题了

`

Answer 9

我也遇到相同的问题，不过跟版本没关，是视图层没更新，用vm.$set()强制更新就好了，具体看文:
https://blog.csdn.net/PGguoqi...