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