Визуализация содержимого вне родительского компонента

Question

Когда я загружаю компонент vue внутри тега @foreach, он отображается первым, вне его родительского компонента.

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

Даже если игнорировать все вещи на стороне сервера, это не сработает:

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

Было бы хорошо в однофайловом компоненте, но если эта разметка доходит до браузера (какв вашем случае) он вырвет tab-descgen из таблицы, прежде чем Vue приблизится к нему.

Вам нужно будет использовать is, чтобы обойти это:

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

Это объяснено здесь в документах:

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

Короче говоря, только элементы tr допускаются как прямые потомки tbody, все остальное вытаскивается.Обходной путь должен использовать tr, а затем сообщить Vue, что вы действительно хотели, используя is.

Answer 3

Это потому, что содержимое отображается перед загрузкой Vue, т. Е. Blade (php) отображает содержимое -> Загружает любой Javascript (Vue) -> Vue отображает