Laravel用数据库关系替换/转换@Foreach循环为VUE V-For循环

Question

im制作一个Laravel Spa，我最近学会了如何使用VUE，我知道v-for如何使用我的组件来为VUE工作。我只知道如何仅在没有关系的情况下循环循环，这就是为什么我很难更改它。我有两个桌子，分别是news和comments，此表news hasmany comments。

现在我的刀片文件。

@foreach($news->comments as $comment)
<div class="comment" style="background-color: #f6efef;" >
<div class="author-info">
  <img src={{"https://www.gravatar.com/avatar/" . md5(strtolower(trim($comment->email))) . "?s=50&d=retro" }} class="author-image" id="image">
  <div class="author-name">
       <h4>{{$comment->name}} </h4>
       <p class="author-time"> {{  date('jS F, Y - g:iA' ,strtotime($comment->created_at)) }}</p>
  </div>
</div>
<div class="comment-content">
        {{$comment->comment}}
</div>
</div>
@endforeach

Answer 1

your component goes like this in vue2.0
**block.vue**
<template>
 <div class="comment" style="background-color: #f6efef;" v-for="comment in 
   news.comments" >
   <div class="author-info">
      <img :src="comment.author_image" }} class="author-image" id="image">
      <div class="author-name">
       <h4>{{ comment.name }} </h4>
       <p class="author-time"> {{ comment.time }}</p>
      </div>
    </div>
   <div class="comment-content">
        {{ comment.comment }}
   </div>
 </div>
</template>
<script>
export default {
   name: "block",
   props: [ "news" ], //or
   data() => ({ news: [] })
}
</script>