Почему Vue рендерит компонент вне родительского блока?

Question

[Yevhenii K]

Вызов компонента происходит в таблице, а вставляется он перед таблицей. Почему так происходит?

Blade файл, где вызывается компонент product-item

@extends('backend.app')

@section('page_title', 'Products list')

@section('btn-create')
    <a class="btn btn-outline-primary" href="{{route('products.create')}}">Create</a>
@endsection

@section('content')
    <div class="card" id="app">
        <div class="card-header">
            Header
        </div>
        <table class="table mb-0">
            <thead>
                <tr>
                    <th></th>
                    <th>ID</th>
                    <th>Image</th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($products as $product)
                    @php
                        $links = [
                            'edit' => route('products.edit', $product->id),
                            'destroy' => route('products.destroy', $product->id)
                        ];
                    @endphp

                    <product-item
                        v-bind:product='@json($product)'
                        v-bind:links='@json($links)'
                    ></product-item>
                @empty
                    <tr>
                        <td colspan="6">Products not found</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection

Код компонента

<template>
    <tr>
        <td>
            <div class="form-group form-check">
                <input class="form-check-input" type="checkbox" name="" id="">
            </div>
        </td>
        <td>{{ product.id }}</td>
        <td><img src="https://via.placeholder.com/50?text=" alt=""></td>
        <td>
            <a v-bind:href="links.edit">{{ product.name }}</a>
        </td>
        <td><span class="o-currency"></span>325.00</td>
        <td>
            <div class="b-actions">
                <a href="" class="b-actions__link">
                    <span class="o-icon o-icon--active">
                        <i data-feather="eye"></i>
                    </span>
                </a>
                <a v-bind:href="links.destroy" class="b-actions__link">
                    <span class="o-icon">
                        <i data-feather="trash"></i>
                    </span>
                </a>
            </div>
        </td>
    </tr>
</template>

<script>
    export default {
        name: 'product-item',
        props: ['product','links'],
    }
</script>

Answer 1

[0xD34F]

Особенности парсинга DOM-шаблона:

Некоторые HTML-элементы, такие как <ul>, <ol>, <table> и <select> имеют ограничения на то, какие элементы могут отображаться внутри них, или например элементы, такие как <li>, <tr> и <option> могут появляться только внутри других определённых элементов.

Это приведёт к проблемам при использовании компонентов с элементами, которые имеют такие ограничения. Например:

<table>
  <blog-post-row></blog-post-row>
</table>

Пользовательский компонент <blog-post-row> будет поднят выше, так как считается недопустимым содержимым, вызывая ошибки в итоговой отрисовке. К счастью, специальный атрибут is предоставляет решение этой проблемы:

<table>
  <tr is="blog-post-row"></tr>
</table>