Vue组件方法未触发答案

【问题标题】：Vue component methods not firingVue组件方法未触发
【发布时间】：2021-04-05 19:09:20
【问题描述】：

我正在试用 Vue，但遇到了组件的“挂载”方法无法触发的问题，老实说，我看不出它无法正常工作的任何原因，没有错误或警告，我检查了每个单行现在至少 4 次，我只是不知道出了什么问题，当方法在 Post 组件中触发并且它起作用时，我尝试了“控制台记录”一些东西，但是当我尝试做同样的事情时它没有Comment 组件中的东西，这是您应该需要的所有代码：

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>

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您的 mounted 函数在您的 methods 对象内。像这样移出来：

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

【讨论】：