Vue 内容在父组件外渲染

Question

当我在 @foreach 标签内加载一个 vue 组件时，它首先在其父组件之外呈现。 //view      <div class="contenido" style="padding-top:5%">         <table class="table">                <thead class="thead-dark">                    <tr>                        <th class="col-md-8">Nombre descripción general</th>                        <th class="col-md-2">Actualizar</th>                        <th class="col-md-2">Consultar</th>                    </tr>                </thead>                <tbody>                @foreach($descs as $desc)                        <tab-descgen desc-nombre = "{{ $desc -> nombre }}" desc-id = "{{ $desc -> id }}"></tab-descgen>                @endforeach                </tbody>            </table>   //vue component   <template>    <tr >         <td>{{ this.descNombre }}</td>     <td><i style="font-size:30px;" class="fa fa-edit float-center"></i>  </td>     <td><i style="font-size:30px;" class="fa fa-arrow-circle-right    float-center"></i></td>  </tr>   </template>  <script>    export default {       props:['descNombre', 'descId'],当这被渲染时，vue 组件内的表格行将被渲染在标题上方，我不太明白为什么。我想知道我是否遗漏了什么。

Answer 1

您需要将所有数据传递给 Vue 组件并在其中执行循环。

Answer 2

这是因为该内容在 Vue 加载之前呈现，即 Blade(php) 呈现内容 -> 加载任何 Javascript(Vue) -> Vue 呈现