v-for in array route // vuejs

Question

在附加的屏幕截图中，我想转到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>

​

​

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

我已经在您现有的循环中添加了另一个循环，以循环遍历注释并访问值。

Answer 2

评论与帖子相关。一篇文章可以有几条评论。如果你现在遍历帖子，你会看到关键的评论。在这一点上，注释也必须循环。oneToMany关系是为什么您必须在post循环中包含注释循环的原因。这样你就可以访问每一条评论。我希望这对你有帮助，而不用写太多的代码。