时间戳

首页 > 解决方案 > Vue2 $emit 没有触发回调

vuejs2 - Vue2 $emit 没有触发回调

问题描述

使用 Vue2，我在页面上有一个书籍列表，其中详细信息通过子组件显示。用户可以从子组件中删除其中一本书。我希望列表在删除后更新。从数据库中删除记录后，我正在使用来自孩子的 $emit 。我可以从控制台看到 $emit 与有效负载中正确的新书籍列表一起发送。但是，父级中的回调函数没有被触发。我可以说出来，因为我在回调开始时拥有的 console.log 没有出现在控制台中。

关于我做错了什么有什么建议吗？

这是父项中的内容：

<div v-for="book in books" :key="book.BookID"  @book-refresh="refreshbooks">
  <BookCard :book="book" />
</div>

这是回调函数：

async refreshbooks(newbooks) {
  console.log('in books.vue, starting refreshBooks, newbooks is: ', newbooks)
  this.$set(this, "books", newbooks)
  .bind(this)
},

下面是触发 $emit 的函数（在子组件中）的内容：

async deleteBook(bookID) {
this.dialogdelete = false
await (EventService.deleteBook(bookID, this.user.UserID))
  .then((newbooks) => {
    this.$emit('book-refresh', newbooks)
  }
    )

},

标签： vuejs2

解决方案

TJ，谢谢你的建议。我按照你说的做了，并创建了有效的 mre。然后我回去看看有什么不同。我唯一改变的是函数的名称。我将 book-refresh 和 refreshbooks 全部更改为简单的刷新。现在它完美地工作了。我还没有花时间看看我是否只是没有正确匹配名称，或者是否有一些关于连字符的名称？我昨天确实在某个地方读到混合大小写有所不同，所以也许？无论如何，保持超级简单帮助我继续前进。

再次感谢您帮助我看到森林而不是树木！

推荐阅读