vue-element-admin我踩的坑（11）

这个应该是element-ui中el-autocomplete的一个bug。

我的element-ui是2.4.6版本。

问题表现：el-autocomplete如果设置了默认值，选择新的值后，组件上的输入框并没有更新新的值。但通过chrome的vue devtool检查绑定值是已经更新了的。

举例：在对话框中有一个autocomplete组件，然后在打开对话框的时候，对绑定变量state1赋值，以便在打开对话框的时候就能看到autocomplete已经有值"good"。这个时候不管选择了下拉列表的什么值，输入框都是你输入的值，比如下拉列表中有个“good”,“bad”等，你在输入框输入了"ba"，下拉列表已经给你筛选出了"bad",鼠标点选bad后，输入框应该就变成"bad"，但实际情况是，输入框还是"ba"。如果你点击关闭对话框，就能看到关闭前，输入框变成了"bad"。证明这个就是autocomplete组件刷新的问题。

代码：

<el-dialog ***>

*****

*****

<el-autocomplete

class="inline-input"

v-model="state1"

:fetch-suggestions="querySearch"

placeholder="请输入内容"

@select="handleSelect"

></el-autocomplete>

****

****

</el-dialog>

methods: {

*****

openDiag() {

state1 = 'good'

}

*****

}

多次尝试后，得到解决方案1，不太满意，用2完美解决：

1. el-autocomplete加一个ref="autoc" 引用标签，

<el-autocomplete

ref="autoc"

class="inline-input"

v-model="state1"

:fetch-suggestions="querySearch"

placeholder="请输入内容"

@select="handleSelect"

></el-autocomplete>

对应的@select方法handleSelect中使用：

this.$refs.autoc.value = this.state1

这样虽然可以解决问题，但会有vue的报警

2. 在@select方法handleSelect中使用：

this.$forceUpdate()

强制刷新组件，问题解决。

后续：

才发现，原来是我没有把form对象给初始化，如果初始化了就不存在上面的问题了。如下面是element官网的代码：