v-for 数组路由 // 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

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

v-for 数组路由 // vuejs

v-for in array route // vuejs

javascript

vue.js

vue-cli