Vue.js v-for遍历数组时element.comments.content无法取值如何解决

问题根因 #

element.comments 是数组类型，数组内的每一项才是包含 content 字段的评论对象，直接对数组本身访问 .content 属性无法拿到预期值。

解决方案 #

场景1：需要展示当前帖子下的所有评论

在原有结构基础上新增一层 v-for 遍历评论数组即可：

<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"
    />
    <!-- 遍历所有评论 -->
    <div v-for="(comment, commentIndex) in element.comments" :key="commentIndex">
      <p>{{ comment.content }}</p>
    </div>
  </div>
</div>

场景2：只需要展示第一条评论的内容

直接指定数组下标访问即可，推荐加上可选链?.避免评论为空时报错：

<p>{{ element.comments[0]?.content }}</p>

如果你的开发环境不支持可选链语法，可以改用条件渲染写法：

<p v-if="element.comments.length > 0">{{ element.comments[0].content }}</p>

内容的提问来源于stack exchange，提问作者Jorge_RM