Javascript Vue组件方法未触发

我在试用Vue，遇到了一个组件的“挂载”方法不触发的问题，老实说，我看不出它不起作用的任何原因，没有错误或警告，我现在至少检查了每一行4次，我就是不知道出了什么问题，我试过“控制台日志记录”当该方法在Post组件中启动并起作用时，它会起作用，但当我尝试在注释组件中执行相同操作时，它不会起作用，以下是您需要的所有代码：

员额构成部分：

<template>
  <div class="blog-post">
    <h2>{{ title }}</h2>
    <p>{{ body }}</p>
    <div class="comment-section">
      <Comment
        v-for="comment in comments"
        v-bind:key="comment.id"
        :name="comment.name"
        :email="comment.email"
        :body="comment.body"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Comment from "./Comment";

export default {
  name: "Post",
  props: {
    title: String,
    body: String,
    postId: Number,
  },
  components: {
    Comment,
  },
  data() {
    return {
      comments: [
        {
          name: "comment name",
          email: "comment email",
          body: "comment body",
          postId: 1,
          id: 1,
        },
      ],
    };
  },
  methods: {
    async getPostData() {
      const url = `https://jsonplaceholder.typicode.com/comments`;
      const response = await axios.get(url);
      const data = await response.data;
      this.comments = data.map((comment) => ({
        name: comment.name,
        email: comment.email,
        body: comment.body,
        postId: comment.postId,
        id: comment.id,
      }));
    },
    mounted() {
      this.getPostData();
    },
  },
};
</script>

<template>
  <div class="comment">
    <h4>{{ name }}</h4>
    <h5>{{ email }}</h5>
    <p>{{ body }}</p>
  </div>
</template>

<script>
export default {
  name: "Comment",
  props: {
    name: String,
    email: String,
    body: String,
  },
  data() {
    return {};
  },
};
</script>

{{title}}
{{body}}

从“axios”导入axios；
从“/Comment”导入注释；
导出默认值{
名称:"邮政"，
道具：{
标题：字符串，
正文：字符串，
posted:Number，
},
组成部分：{
评论,，
},
数据（）{
返回{
评论：[
{
名称：“注释名称”，
电子邮件：“评论电子邮件”，
正文：“注释正文”，
职位:1,，
id:1，
},
],
};
},
方法：{
异步getPostData（）{
常量url=`https://jsonplaceholder.typicode.com/comments`;
const response=wait axios.get（url）；
常量数据=等待响应。数据；
this.comments=data.map（（comment）=>({
name:comment.name，
电子邮件：comment.email，
body:comment.body，
posted:comment.posted，
id:comment.id，
}));
},
安装的（）{
这是getPostData（）；
},
},
};

以及评论部分：

<template>
  <div class="blog-post">
    <h2>{{ title }}</h2>
    <p>{{ body }}</p>
    <div class="comment-section">
      <Comment
        v-for="comment in comments"
        v-bind:key="comment.id"
        :name="comment.name"
        :email="comment.email"
        :body="comment.body"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Comment from "./Comment";

export default {
  name: "Post",
  props: {
    title: String,
    body: String,
    postId: Number,
  },
  components: {
    Comment,
  },
  data() {
    return {
      comments: [
        {
          name: "comment name",
          email: "comment email",
          body: "comment body",
          postId: 1,
          id: 1,
        },
      ],
    };
  },
  methods: {
    async getPostData() {
      const url = `https://jsonplaceholder.typicode.com/comments`;
      const response = await axios.get(url);
      const data = await response.data;
      this.comments = data.map((comment) => ({
        name: comment.name,
        email: comment.email,
        body: comment.body,
        postId: comment.postId,
        id: comment.id,
      }));
    },
    mounted() {
      this.getPostData();
    },
  },
};
</script>

<template>
  <div class="comment">
    <h4>{{ name }}</h4>
    <h5>{{ email }}</h5>
    <p>{{ body }}</p>
  </div>
</template>

<script>
export default {
  name: "Comment",
  props: {
    name: String,
    email: String,
    body: String,
  },
  data() {
    return {};
  },
};
</script>

{{name}}
{{email}}
{{body}}

导出默认值{
名称：“评论”，
道具：{
名称：String，
电子邮件：String，
正文：字符串，
},
数据（）{
返回{}；
},
};

---

当我自己将占位符数据放入comments数组时，注释会正确呈现，因此显然mount（）和getPostData（）方法不会触发（或者至少不会触发其中一个），考虑到我之前也尝试过控制台日志记录。我根本看不出这是什么问题，也不能用谷歌搜索这样的东西，因为它太具体了。到目前为止，我所知道的是，我从works中获取数据的API，URL是正确的，注释确实显示在页面上，这意味着渲染没有问题，正如我所说的，我尝试在getPostData中记录一些东西，但它不起作用，而在Blog组件中它起作用（除了获取帖子而不是评论外，这与帖子应该做的完全相同）。无论如何，如果您需要任何帮助，我希望我提供了您可能需要的所有信息，如果没有，请询问。

您的

挂载的
函数位于
方法
对象内。
像这样将其移出：

<template>
  <div class="blog-post">
    <h2>{{ title }}</h2>
    <p>{{ body }}</p>
    <div class="comment-section">
      <Comment
        v-for="comment in comments"
        v-bind:key="comment.id"
        :name="comment.name"
        :email="comment.email"
        :body="comment.body"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Comment from "./Comment";

export default {
  name: "Post",
  props: {
    title: String,
    body: String,
    postId: Number,
  },
  components: {
    Comment,
  },
  data() {
    return {
      comments: [
        {
          name: "comment name",
          email: "comment email",
          body: "comment body",
          postId: 1,
          id: 1,
        },
      ],
    };
  },
  methods: {
    async getPostData() {
      const url = `https://jsonplaceholder.typicode.com/comments`;
      const response = await axios.get(url);
      const data = await response.data;
      this.comments = data.map((comment) => ({
        name: comment.name,
        email: comment.email,
        body: comment.body,
        postId: comment.postId,
        id: comment.id,
      }));
    },
  },
  mounted() {
      this.getPostData();
    },
};
</script>


{{title}}
{{body}}

从“axios”导入axios；
从“/Comment”导入注释；
导出默认值{
名称:"邮政"，
道具：{
标题：字符串，
正文：字符串，
posted:Number，
},
组成部分：{
评论,，
},
数据（）{
返回{
评论：[
{
名称：“注释名称”，
电子邮件：“评论电子邮件”，
正文：“注释正文”，
职位:1,，
id:1，
},
],
};
},
方法：{
异步getPostData（）{
常量url=`https://jsonplaceholder.typicode.com/comments`;
const response=wait axios.get（url）；
常量数据=等待响应。数据；
this.comments=data.map（（comment）=>({
name:comment.name，
电子邮件：comment.email，
body:comment.body，
posted:comment.posted，
id:comment.id，
}));
},
},
安装的（）{
这是getPostData（）；
},
};