vuejs2 - 更改v-model值时如何防止@change事件

Question

我正在 Vue.js 中构建一个由 Firebase 支持的自动完成菜单(使用 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>

单击潜在匹配项后，目的是设置该字段的值并清除匹配项列表。

这是组件的代码部分:

computed: {
  /* method borrowed from Reddit user imGnarly: https://www.reddit.com/r/vuejs/comments/63w65c/client_side_autocomplete_search_with_vuejs/ */
  searcher() {
    let self = this;
    let holder = [];
    let rx = new RegExp(this.selectedTo, 'i');
    this.users.forEach(function (val, key) {
      if (rx.test(val.name) || rx.test(val.email)) {
        let obj = {}
        obj = val;
        holder.push(obj);
      } else {
        self.searchResult = 'No matches found';
      }
    })
    this.searchResult = holder;
    return this.selectedTo;
  },

  showSearcherDropdown() {
    if(this.searchResult == null) return false;
    if(this.selectedTo === '') return false;
    return true;
  }
},

methods: {
  selectToUser: function( user ) {
    this.newMessage.to = user['.key'];
    this.selectedTo = user.name;
    this.searchResult = null;
  }
}

Typeahead 运行良好，每次更改输入字段时，都会调用 searcher() 函数并使用正确的值填充 searchResult。显示了 v-for 和 div 列表。

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

但是，在第一次单击时，控制台中出现异常并且 div 没有清除(我希望它们消失，因为我将 searchResults 设置为 null)。

[Vue warn]: Error in event handler for "change": "TypeError: fns.apply is not a function"

found in

---> <BFormInput>
       <BFormGroup>
         <BTab>

TypeError: fns.apply is not a function
    at VueComponent.invoker (vue.esm.js?efeb:2004)
    at VueComponent.Vue.$emit (vue.esm.js?efeb:2515)
    at VueComponent.onChange (form-input.js?1465:138)
    at boundFn (vue.esm.js?efeb:190)
    at invoker (vue.esm.js?efeb:2004)
    at HTMLInputElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1802)

如果我第二次单击 div 则没有错误，输入值已设置并且 div 消失。

所以我怀疑向 this.selectedTo(这也是元素的 v-model 对象)写入一个值会触发一个 @change 事件。在第二次点击时，值实际上并没有改变，因为它已经设置了，所以没有调用到 searcher() 并且没有错误。

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

问题 :如何在通过方法更改 v-model 值时防止 @change 事件？

(其他信息:根据 package.json 我在 vue 2.5.2)

Answer 1

在:

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

“搜索者”应该是一种方法。任何时候都会调用的方法 b-component问题 change事件。

但是看你的代码，不是方法，而是 computed :

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

  showSearcherDropdown() {
    ...
  }
},

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

所以当 change事件发生时，它试图调用一些不是方法的东西(或者，换句话说，它试图调用一个不存在的方法)。这就是您收到错误的原因。

现在，因为您真正想要的是更新 searcher每当 this.selectedTo改变，为了得到那个，实际上不需要那个 @change处理程序。这是由于 computed: { searcher() { 的代码已经依赖 this.selectedTo .每当 this.selectedTo变化，Vue 会计算 searcher再次。

解决方案:只需删除 @change="searcher"来自 b-form .其他一切都会奏效。