Laravel + Vue 在刀片上的 @foreach 中加载组件答案

【问题标题】：Laravel + Vue load component inside @foreach on bladeLaravel + Vue 在刀片上的 @foreach 中加载组件
【发布时间】：2020-12-11 11:23:03
【问题描述】：

晚安

我的 home.blade.php 中有下一个 @foreach

 @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

但是 calculadora-component 不适用于@foreach，我该怎么办？

这是我目前的 vue 组件，

   <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>

【问题讨论】：

你能展示一下vue实例吗？
您正在为每个 <div id='app'> 创建一个 Vue 实例。您只能挂载到一个 ID 为 app 的元素。

标签： php laravel vue.js foreach laravel-blade

【解决方案1】：

您必须将该 foreach 循环包装到一个具有应用程序 ID 的 div 中，如下所示：

<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>

【讨论】：

有答案！