Javascript 在Vue-won'；不发射

我想做的是：

我单击comments.vue中的按钮，该按钮将添加在文本区域中键入的注释。此操作将发送到event.vue，后者将侦听该操作。当它听到这个动作时，它将激活一个方法，将注释推送到一个列表中。然后我想显示这个评论列表。我不明白为什么它不起作用

评论.vue：

<template>
  <div>
    <form>
      <label>Comments</label>
      <textarea v-model="comment"/>
      <input class="button" @click.prevent="addComment" type="submit" value="Add comment">
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: 'Arnulf',
      comment: ''
      /* timeAndDate: Date */
    }
  },
  methods: {
    addComment () {
      const comment = {
        name: this.name,
        comment: this.comment
        /* timeAndDate: this.timeAndDate */

      }
      console.log('hello')
      this.$emit('submitted', comment)// THIS WONT EMIT FOR SOME REASON

      this.comment = ''
    }
  }
}
</script>

评论
导出默认值{
数据（）{
返回{
名称：“阿努夫”，
注释：“”
/*时间和日期：日期*/
}
},
方法：{
添加注释（）{
常量注释={
姓名：this.name，
注释：this.comment
/*timeAndDate：this.timeAndDate*/
}
console.log（'hello'）
this.$emit（'submitted'，comment）//由于某种原因，它不会发出
this.comment=''
}
}
}

Event.vue：

<template>
  <div>
    <CommentList :comments="listOfComments"></CommentList>
    <Comments @submitted="addComment"></Comments>
  </div>
</template>

<script>
import CommentList from '@/components/CommentList'
import Comments from '@/components/Comments'
export default {
  data () {
    return {
      listOfComments: []
    }
  },
  name: 'Event',
  components: {
    CommentList,
    Comments
  },
  methods: {
    addComment (comment) {
      console.log('bruh')
      this.listOfComments.push(comment)
    }
  }
}
</script>

从“@/components/CommentList”导入CommentList
从“@/components/Comments”导入注释
导出默认值{
数据（）{
返回{
建议清单：[]
}
},
名称：'事件'，
组成部分：{
评论列表，
评论
},
方法：{
添加注释（注释）{
console.log（'bruh'）
此.listOfComments.push（注释）
}
}
}

commentlist.vue：

<template>
  <div>
    <h3>Kommentarer:</h3>
    <ul>
      <li v-for="(comment, index) in comments" :key="index">
        {{comment.name}}:
        <br/>
        "{{comment.comment}}"
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CommentList',
  props: {
    comments: {
      type: Array
    }
  }
}
</script>

科门塔雷：


{{comment.name}}：


“{comment.comment}}”


导出默认值{
名称：'CommentList'，
道具：{
评论：{
类型：数组
}
}
}

---

编辑：添加了代码的其余部分，因此可以跟踪所有逻辑。

您的代码运行得非常好。检查下面的代码段

Vue.config.productionTip=false；
Vue.config.devtools=false；
Vue.component（'根'{
数据（）{
返回{
建议清单：[]
}
},
名称：'事件'，
方法：{
添加注释（注释）{
console.log（'bruh'）
此.listOfComments.push（注释）
}
},
模板：`
`
});
Vue.组件（'注释'{
数据（）{
返回{
名称：“阿努夫”，
注释：“”
/*时间和日期：日期*/
}
},
方法：{
添加注释（）{
常量注释={
姓名：this.name，
注释：this.comment
/*timeAndDate：this.timeAndDate*/
}
console.log（'hello'）
this.$emit（'submitted'，comment）//由于某种原因，它不会发出
this.comment=''
}
},
模板：`
评论
`
});
Vue.组件（‘注释列表’{
道具：{
评论：{
类型：数组
}
},
模板：`
科门塔雷：


{{comment.name}}：


“{comment.comment}}”


`
});
新的Vue（{el:#root}）

建议列表是否为反应性？Aka您在
数据中定义了它吗？是的，它在数据中定义。console.log（'bruh'）永远不会出现。@Kenso33，我已经在一些代码片段中尝试了您的代码（作为下面的答案发布）以及。它在任何地方都运行得很好。如果您能提供某种问题可复制的代码段，那就更好了。您正在使用
vue2
或
vue3
？谢谢！似乎问题出在我的event.vue组件上。我对我的代码为什么不起作用，我不认为它只是HTML没有正常工作。它现在是固定的，功能齐全！非常感谢。