Question

我有一个组件，该组件接收jsonplaceholder api数据作为帖子，并为每个帖子添加评论。我运行一个get呼叫来获取帖子，输入帖子的ID，然后运行另一个get来获取每个帖子的评论。我使用此api的工作室ghibli部分的相同方式构建了此对象，但是不知何故，除非我自己开始输入评论，否则它不会呈现评论。 Studio ghibli api是用相同的方式构建的，但它不会引发此错误，它只是在组件进入时对其进行渲染。我还研究了在获取注释数据后强制重新渲染组件的方法，但是那也不起作用。我不知道该怎么办，需要帮助！

这是指向github的链接，下面是我的代码：https://github.com/roninMo/vueRestfulApi/blob/master/src/components/Posts.vue 如果您感到困惑，请在发布后查看json.vue

这里是api调用，它获取数据，并将其作为prop传递到帖子中：

created() {
axios
  .get(`https://jsonplaceholder.typicode.com/posts?_limit=5`)
  .then((res) => {
    this.posts = res.data;
    console.log(`These are the posts`, this.posts);
    for (let i = 0; i < this.posts.length; i++) {
      axios
        .get(
          `https://jsonplaceholder.typicode.com/post/${this.posts[i].id}/comments`
        )
        .then((resp) => {
          this.posts[i].comments = resp.data;
          this.$forceUpdate();
        })
        .catch((err) => console.log(err));
    }
  })
  .catch((err) => console.log(err));
},

然后，我们针对帖子中的每个评论数组在v-for中的v-for中呈现评论（请注意，添加评论会立即更新此评论，并且与页面进行交互（例如，只需输入注释框，它将呈现这些注释，但它们不会在初始化时或在您进行交互之前显示）：

<template>
 <div class="template-container mt-5">
  <v-row class="mb-6" justify="center">
   <v-col
    xs="12"
    sm="12"
    md="10"
    lg="8"
    v-for="post in posts"
    v-bind:key="post.id"
  >
    <v-card dark>
      <v-card-title class="c-t">{{ post.title }}</v-card-title>
      <v-card-subtitle>User {{ post.id }}</v-card-subtitle>
      <v-card-text class="text-left">{{ post.body }}</v-card-text>

      <v-card-actions>
        <!-- Edit post button and modal -->
        <EditPost
          v-bind:postId="post.id"
          v-on:edit-post-pass="editPostPass"
        />

        <!-- Delete post button -->
        <v-btn
          text
          color="red accent-4"
          @click="$emit('del-post', post.id)"
        >
          Delete
        </v-btn>
      </v-card-actions>

      <v-card-text>
        <v-divider class="mx-4"></v-divider>
        <v-card-subtitle class="text-left com-t">Comments</v-card-subtitle>

        <!-- Comments loop -->
        <div class="conditional" v-if="post.comments != null">
          <v-card
            class="mb-2 comment-card"
            v-for="comment in post.comments"
            v-bind:key="comment.id"
          >
            <v-card-title>User: {{ comment.name }}</v-card-title>
            <v-card-subtitle>{{comment.email}}</v-card-subtitle>

            <v-card-text>{{comment.body}}</v-card-text>
          </v-card>
        </div>
      </v-card-text>

      <!-- Search  -->
      <v-form ref="form" lazy-validation>
        <v-row class="mb-6" justify="center" align="center">
          <v-col xs="6" sm="8" md="8" lg="8">
            <v-text-field v-model="comment" label="Comment" class="ml-2"></v-text-field>
          </v-col>

          <v-col xs="2" sm="2" md="2" lg="2">
            <v-btn color="success" @click="createComment(post.id)">Send</v-btn>
          </v-col>
        </v-row>
      </v-form>
    </v-card>
  </v-col>
</v-row>

V-for呈现新数据时不呈现

0 个答案: