When I use v-for to display components, the custom event update emitted by the child component is not triggered. However, when using standalone components, everything works fine.
I am struggling to find a solution to this issue.
Main.js
import Vue from "vue";
import App from "./App.vue";
new Vue({
render: (h) => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<h1>It's working</h1>
<Inner v-on:update="this.do" />
<h1>It's NOT working</h1>
<Inner v-for="n in [1, 2, 3]" :key="n" v-on:update="this.do" />
</div>
</template>
<script>
import Inner from "./Inner";
export default {
name: "App",
components: { Inner },
methods: {
do() { alert(1); },
},
};
</script>
Inner.vue
<template>
<button v-on:click="this.do">CLICK ME</button>
</template>
<script>
export default {
name: "Inner",
methods: {
do() { this.$emit("update"); },
},
};
</script>