Vue custom events in loop

Question

When displaying components using v-for, the events emitted by the child component are not triggered (custom event update). The standaline component works as it should.

I don't understand how to deal with the problem.

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 work</h1>
    <Inner v-on:update="this.do" />
    <h1>It NOT work</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>

Can you try just v-on:update="do" instead of v-on:update="this.do" ? — obe
– obe, Commented Feb 28, 2021 at 14:03
Yes, in my example the name of the method was unsuccessfully chosen, because of this I had to use this. Using a different name allowed us to get rid of this. — Sergei Demchuk
– Sergei Demchuk, Commented Feb 28, 2021 at 18:21

Majed Badawi · Accepted Answer · 2021-02-28 14:10:33Z

3

do is a keyword in JavaScript, try naming the methods another name without using this in order to use the component. Here is a demo:

const Inner = Vue.component('Inner', {
  template: '#Inner',
  methods: {
    clicked() { this.$emit("update"); },
  },
});

new Vue({
  el:"#app",
  components: { Inner },
  methods: {
    clicked() { alert(1); },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template id="Inner">
  <button v-on:click="clicked">CLICK ME</button>
</template>

<div id="app">
  <h1>It NOT work</h1>
  <Inner v-for="n in [1, 2, 3]" :key="n" v-on:update="clicked" />
</div>

answered Feb 28, 2021 at 14:10

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sergei Demchuk Over a year ago

Thanks for the working example, but in my application such a case still does not want to work, I cannot yet generate a similar simple example.

Collectives™ on Stack Overflow

Vue custom events in loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related