v-for in array route // vuejs答案

【问题标题】：v-for in array route // vuejsv-for in array route // vuejs
【发布时间】：2021-12-04 08:25:54
【问题描述】：

在附加的屏幕截图中，我想访问content。我正在尝试使用element.comments.content 来访问它，但不起作用，请参阅下面的代码：

<div class="fil-actualites-container">
  <div class="posts" v-for="(element, index) in postArray" :key="index">
    <p>{{ element.title }}</p>
    <p>{{ element.content }}</p>
    <p>{{ element.likes.length }}</p>
    <button @click="addLike(element._id)">Add Like</button>
    <br />
    <input
      type="text"
      v-model="contentComment"
      @keydown.enter="addComment(element._id)"
      placeholder="add Comment"
    />
    <p>{{ element.comments.content }}</p>
  </div>

【问题讨论】：

似乎 cmets 是一个数组尝试element.comments[0].content

标签： javascript vue.js vue-cli

【解决方案1】：

comments 是posts 数组中的一个数组 ([])。

因此，您需要循环访问其中的值。我不知道您的确切用例，但类似这样：

<div class="fil-actualites-container">
  <div class="posts" v-for="(element, index) in postArray" :key="index">
    <div v-for="(comment, i) in element.comments" :key="`comment-${i}`">
      <p>{{ comment.title }}</p>
      <p>{{ comment.content }}</p>
      <p>{{ comment.likes.length }}</p>
      <button @click="addLike(comment._id)">Add Like</button>
      <br />
      <input
        type="text"
        v-model="contentComment"
        @keydown.enter="addComment(comment._id)"
        placeholder="add Comment"
      />
      <p>{{ comment.content }}</p>
    </div>
  </div>

我在您现有的循环中添加了另一个循环，以循环通过 cmets 并访问值。

【讨论】：

非常感谢 Max，它运行良好 :)

【解决方案2】：

cmets 与帖子相关。一个帖子可以有多个 cmets。如果您现在遍历这些帖子，您将看到关键的 cmets。此时还必须循环评论。 oneToMany 关系是您必须在帖子循环中包含评论循环的原因。这使您可以访问每条评论。我希望这对您有所帮助，而无需编写大量代码。

【讨论】：