英文:
How to catch an emeit event.target with vue?
问题
如何使用Vue捕获一个$emit事件目标？尝试创建一个$emit的Vue并出现错误。
我尝试捕获来自子组件的事件目标发射，通过将输入字符串的onChange作为参数传递。但是出现了一个错误"Cannot read properties of undefined (reading 'target')"。尽管语法是正确的，我认为。
链接：https://stackblitz.com/edit/nuxt-bootstrap-vue-dynamic-img-iiam9a?file=components%2FBrand.vue,components%2FMoneyAmount.vue,pages%2Findex.vue,components%2FCategory.vue,components%2FRating.vue,components%2FSearch.vue,components%2FProductList.vue,store%2Findex.js,components%2FProduct.vue
<input
type="text"
placeholder="在这里搜索"
v-model="search"
:change="$emit('search', $event.target.value)"
/>
<!-- 父组件 -->
<Search @search="searchProduct" />
<script>
methods: {
searchProduct(searchInput) {
this.search = searchInput;
},
},
</script>
英文:
How to catch an emeit event.target with vue ? Trying to make an $emit vue and getting an error
I tryed to catch an event target emit from a child component from an input , passing as a param the onChange input string. But getting an error "Cannot read properties of undefined (reading 'target')". Even though the syntaxis is correct I assume.
<input
type="text"
placeholder="Search here"
v-model="search"
:change="$emit('search', $event.target.value)"
// Parent
<Search @search="searchProduct" />
<script>
methods: {
searchProduct(searchInput) {
this.search = searchInput;
},
},
/>
答案1
得分: 2
在Vue中监听事件，我们使用 v-on:event-name="..." 语法。也可以缩写为 @event-name="..."。您可以在这里找到更多详情。
您错误地监听了 :change 而不是 @change。所以更新的代码应该是：
<input
...
@change="$emit('search', $event.target.value)"
|__ 使用 `@` 代替 `:`
/>
英文:
To listen for events in Vue, we use v-on:event-name="..." syntax. It can also be shortened to @event-name="...". You can find more details here.
You are mistakenly listening for :change instead of @change. So update code should be:
<input
...
@change="$emit('search', $event.target.value)"
|__ `@` instead of `:`
/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论