Vuejs2 更改v型值时如何防止@change事件

我正在Firebase支持的Vue.js中构建一个自动完成菜单（使用Vue fire）。目标是开始输入用户的显示名称，并在下面的div列表中显示匹配记录

模板如下所示：

<b-form-input id="toUser"
    type="text"
    v-model="selectedTo"
    @change="searcher">
</b-form-input>

<div v-on:click="selectToUser(user)" class="userSearchDropDownResult" v-for="user in searchResult" v-if="showSearcherDropdown">{{ user.name }}</div>

Typeahead工作正常，每次更改输入字段时，都会调用searcher（）函数，并用正确的值填充searchResult。所示为v-for工程和div列表

单击div后，我调用selectToUser（用户）。这将正确地将用户对象的详细信息报告给控制台

然而，在第一次单击时，我在控制台中得到一个异常，div并没有清除（我希望它们会消失，因为我将searchResults设置为null）

[Vue warn]：事件处理程序中的“更改”错误：“TypeError:fns.apply不是函数”
发现于
---> 
TypeError:fns.apply不是函数
在VueComponent.invoker上（vue.esm.js？efeb:2004）
位于VueComponent.Vue.$emit（Vue.esm.js？efeb:2515）
在VueComponent.onChange上（表单input.js？1465:138）
在边界fn（vue.esm.js？efeb:190）
调用程序（vue.esm.js？efeb:2004）
在HTMLInputElement.fn._withTask.fn._withTask（vue.esm.js？efeb:1802）

如果我再次单击div，则没有错误，输入值被设置，div消失

因此，我怀疑向this.selectedTo（这也是元素的v-model对象）写入一个值会触发@change事件。在第二次单击时，的值实际上没有更改，因为它已经设置好了，因此没有调用searcher（），也没有错误

我注意到，如果元素失去焦点，也会发生这种情况

问题：如何防止通过方法更改v型值时发生@change事件

（其他信息：根据package.json，我在vue 2.5.2上）

关于：

<b-form-input id="toUser"
    type="text"
    v-model="selectedTo"
    @change="searcher">

因此，当

change

事件发生时，它尝试调用非方法的东西（或者，换句话说，它尝试调用不存在的方法）。这就是为什么会出现错误

现在，由于您实际需要的是每当

this.selectedTo

更改时更新

searcher

，因此，实际上不需要使用

@change

处理程序。这是由于

计算的代码：{searcher（）{

已经依赖于

此选项。选择此选项可
。每当
此选项更改时，Vue将再次计算
搜索程序

解决方案：只需从
b-form
中删除
@change=“searcher”
。其他一切都可以。谢谢您的回答

当然，只要删除对
searcher（）
的引用，就意味着在字段值更改时不采取任何操作，因此该字段根本不起作用

将
searcher（）
函数改为
methods:{}
而不是
computed:{}
意味着它将在输入事件中被调用，甚至不会发生更改（另一个谜团，但不是今天的一个）。一个微妙的差异带走了我所瞄准的typeahead特性

但是，它确实让我记住，
computed:{}
函数的结果是缓存的，并且在任何参数更改时都会重新计算。在这种情况下，我意识到
searcher（）
函数依赖于
this.selectedTo
变量
函数设置
此选项。选择此选项可触发对
搜索器（）的另一个调用

现在已修复。如果将来有人遇到类似的问题，我通过添加另一个变量转向老式的信号量解决了这个问题

var userMadeSelection: false

现在，searcher（）开始检查此场景：

  computed: {
      searcher() {
          if(this.userMadeSelection) {
            this.userMadeSelection = false;
            return this.selectedTo;
          }
          …

然后在selectToUser（）中：

computed: {
  searcher() {
    ...
  },

  showSearcherDropdown() {
    ...
  }
},

methods: {
  selectToUser: function( user ) {
   ...
  }
}

var userMadeSelection: false

  computed: {
      searcher() {
          if(this.userMadeSelection) {
            this.userMadeSelection = false;
            return this.selectedTo;
          }
          …

this.userMadeSelection = true;