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

即使忽略所有服务器端的东西，这也行不通：

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

在单文件组件中它会很好，但如果这个标记进入浏览器（就像你的情况一样），它会在 Vue 接近它之前将

tab-descgen

从表格中删除。

您需要使用

is

来解决这个问题：

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

文档中对此进行了解释：

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

简而言之，只有

tr

元素可以作为

tbody

的直接子元素，其他任何元素都会被删除。解决方法是使用

tr

，然后使用

is

让 Vue 知道你真正想要什么。

---

Vue3

自 Vue v3.4.0 Slam Dunk 起，我们进行了重大更改

v-is 指令已被删除。它在 3.3 中已被弃用。请使用带有 vue: 前缀的 is 属性。

有关

:is

的更多详细信息，可在此处获取。

但是 TLDR，新语法是

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

这就是 Vue 中发生这种情况的原因，主要是HTML 放置限制。

Answer 2

这是因为内容是在 Vue 加载之前渲染的，即 Blade(php) 渲染内容 -> 加载任何 Javascript(Vue) -> Vue 渲染

Answer 3

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