Passing route from laravel blade to vue component causing duplicate output

Viewed 122

I am passing 6 routes from a blade file to a Vue component but when I do and output the routes, the 6 routes appear 6 times in groups of 6. Each group of the same 6 routes shows as it's own component in the vue dev tools.

index.blade.php (some of the looping is done in blade)

 @foreach (App\Questions::all() as $question)
    <question
        :questions="{{App\Questions::all()}}"
        :user="{{$user}}"     
        routes="{{route($question->route)}}">  //Passing the 6 question routes
    </question>
 @endforeach

Questions.vue

 <div v-for="question in questions">
    <div v-for="route in routes">
          <a :href="route">
            {{ question.title }}
          </a>
     </div>
 </div>


<script>
export default {
    props: ["questions", "user", "routes"];
}
</script>

Why are they showing up as 6 different components, each component with the same information 6 times.

Thank you.

1 Answers

You loop six times, creating six components here:

 @foreach (App\Questions::all() as $question)

You bind the same questions, to each component by getting all question models.

:questions="{{App\Questions::all()}}"

Try binding instead to:

 :questions="{{ $question }}"
Related