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加载之前呈现的，即Blade（php）呈现了内容->加载了任何Javascript（Vue）-> Vue呈现

Answer 2

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

Answer 3

即使忽略所有服务器端的内容，这也不起作用：

<tbody>
  <tab-descgen></tab-descgen>
</tbody>

在单个文件组件中会很好，但是如果此标记可以将其传递给浏览器（如您的情况），它将在Vue接近之前将tab-descgen从表中删除它。

您需要使用is来解决此问题：

<tbody>
  <tr is="tab-descgen"></tr>
</tbody>

在文档中对此进行了解释：

https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

简而言之，仅tr个元素被允许作为tbody的直接子元素，其他所有元素都将被撤消。解决方法是使用tr，然后使用is让Vue知道您真正想要的是什么。

Vue内容在父组件外部渲染

3 个答案: