Vue component inside a foreach loop

I´m building a multipage application and in some of my views I need some reactivity. One option I have thought about is to create a Vue component for each blade view, but it feels wrong.

If I have a blade view with a foreach loop of thousands of contacts (with pagination), is it considered a bad practise to add a component within the foreach loop?

@foreach($contacts as $contact)
{{ display something }}
<favorite></favorite>
@endforeach

I have started to understand and use some of the power with Vue and are using it for some part of my application, but sometimes it feels like going all in for Vue + Vue Routing or to use traditional blade with some jQuery scripts.

For instance:

Sometimes when you only need some reactivity to only one page and don´t need a reusable component it feel a bit wrong to create a global component.

goatshark

8 years ago

Level 14

@EKRIST1

Just a random human's $.02...

I have zero heartburn firing up any number of components via a foreach loop. I do it frequently...most of the time I'm v-foring through a list because I'm already in a Vue component, but the idea is the same. And I have definitely fired them up with a Blade @foreach loop when not in a component already.

1 like

alenabdula

8 years ago

Level 13

@ekrist1 There's nothing wrong with using Vue components in Blade's @foreach. Especially if the component requires specific data (in your case a contact). You can pass data as props, for example...

@foreach($contacts as $contact)
  {{ display something }}
  <favorite :contact="{{ $contact }}"></favorite>
@endforeach

Or, you can have a contacts component, that accepts the collection of $contacts and uses Vue's v-for to loop over them, for example.

<contacts :contacts="{{ $contacts }}"></contacts>

// Contacts.vue
<template>
  <div>
    <contact v-for="contact in contacts" :key="contact"></contact>
  </div>
</template>
<script>
  export default {
    props: ['contacts'],
  }
</script>

// Contact.vue
<template>
  <div>
    <!-- template for each contact -->
  </div>
</template>
<script>
  export default {}
</script>

Hope that helps, best Alen.

2 likes

Please or to participate in this conversation.