设置已与 v-model 绑定的输入值答案

【问题标题】：Set input value that has been binded with v-model设置已与 v-model 绑定的输入值
【发布时间】：2017-03-24 19:08:46
【问题描述】：

我正在基于 vue.js 和 materializecss 创建自己的自动完成功能。

https://jsfiddle.net/guanzo/kykubquh/5/

现在它工作正常，除了一些事情。

自动完成的正常行为是，一旦您通过按 Enter 键或单击选择项目，输入的值就会成为您选择的项目。所以如果输入“alab”，选择“Alabama”项，输入的值应该变成“Alabama”，下拉列表消失。

问题是input绑定了v-model="query"，意思是input的值就是“query”的值，也就是input的值。

尝试使用this.$el.querySelector('input').value = "Alabama" 更改输入值不会执行任何操作。我目前的解决方法是将查询的值设置为选定状态的值。

onSelect(state){
    this.selected = state;
    this.query = state.name//replace input val
}

这样做的一个令人讨厌的副作用是，更改 query 的值会触发另一个搜索，这会导致下拉菜单与项目“Alabama”一起重新出现。

如何更改与v-model 绑定的输入的值？

我尝试的解决方法是在用户选择一个项目后调用this.onBlurInput();，这会隐藏下拉菜单。但是，在您通过单击外部并再次返回来明确重新聚焦输入之前，下拉列表将不再出现。

【问题讨论】：

标签： vue.js

【解决方案1】：

删除您的焦点和模糊事件并将以下行添加到您的queryMatches。您真的只想在不完全匹配时显示选项。

queryMatches(){
    if(this.query.length <= 1){
        return [];
    }

    // check to see if the current value is already in the list
    if (this.query === this.selected.name) return [];

    console.log(this.query)
    var reg = new RegExp(this.query,'gi')
    var matches = this.states.filter(state=>{
        return reg.test(state.name)
    })
    console.log(matches)
    return matches
}

这是更新后的fiddle。

【讨论】：

设定条件if (this.query === this.selected.name) return [];