javascript - 循环中的Vue自定义事件

Question

使用 v-for 显示组件时，不会触发子组件发出的事件(自定义事件 update)。独立组件按其应有的方式工作。
我不明白如何处理这个问题。
主文件

import Vue from "vue";
import App from "./App.vue";

new Vue({
  render: (h) => h(App)
}).$mount("#app");

应用程序

<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>

内部.vue

<template>
  <button v-on:click="this.do">CLICK ME</button>
</template>

<script>
export default {
  name: "Inner",
  methods: {
    do() { this.$emit("update"); },
  },
};
</script>

Answer 1

do是 JavaScript 中的关键字, 尝试在不使用 this 的情况下为方法命名另一个名称为了使用组件。这是一个演示:

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>