Laravel + Vue load component inside @foreach on blade

Question

Good night

I have the next @foreach in my home.blade.php

 @foreach($User as $User1)
        <tr>
    <td>{{$User1->name}}</td>
        <td>{{$User1->email}}</td>
        <td>{{$User1->pais}}</td>
            <td>{{$User1->status}}</td>
    <td>
<div id='app'>
    <calculadora-component></calculadora-component>
</div>
    </td>
        </tr>
@endforeach

But the calculadora-component not works with the @foreach, how can I do it?

And this is my vue component for the moment,

   <template>
    <div id="app">
        <select v-on:change="onSelectOption($event)" class="form-control" name="status">
            <option value="" disabled selected hidden>Seleccionar una Opción</option>
            <option value="Activo" selected>Activo</option>
            <option value="Inactivo">Inactivo</option>
        </select>
    </div>
</template>

You're creating a Vue instance for every <div id='app'>. There should only be one element with an id app that you mount to. — Brian Lee
– Brian Lee, Commented Aug 23, 2020 at 2:54

Ján Klátik · Accepted Answer · 2020-08-29 15:12:09Z

1

You have to wrap that foreach loop into a div with the app id like this:

<div id='app'>
@foreach($User as $User1)
        <tr>
    <td>{{$User1->name}}</td>
        <td>{{$User1->email}}</td>
        <td>{{$User1->pais}}</td>
            <td>{{$User1->status}}</td>
    <td>
<div>
    <calculadora-component></calculadora-component>
</div>
    </td>
        </tr>
@endforeach
</div>

answered Aug 29, 2020 at 15:12

Ján Klátik

407 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

officialmmt Over a year ago

There is a answer!

Collectives™ on Stack Overflow

Laravel + Vue load component inside @foreach on blade

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related