Vue 컴포넌트 - 렌더링 위치가 잘못됨

Vue 컴포넌트 - 렌더링 위치가 잘못됨

vue 컴포넌트와 인라인템플릿 사이에 이상한 동작이 발생하고 있습니다.

예 1: 인라인템플릿

이것은 예상대로 동작하고 있습니다.vue 컴포넌트는 아래 예 #2와 같이 변경되지 않습니다.다만 다른 점은 템플릿 콘텐츠를 인라인 템플릿으로 태그에 복사했다는 것입니다.

참조: https://jsfiddle.net/pobffmnv/

<div class="panel panel-primary">
    <div class="panel-heading">Current Clients</div>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Client Name</th>
                <th style="text-align: center;">No. Projects</th>
                <th style="text-align: center;">Time (7 days)</th>
                <th style="text-align: center;">Edit</th>
            </tr>
        </thead>
        <tbody>
            <clientlistitem inline-template>
                <tr>
                    <td>Test</td>
                    <td style="text-align: center;">0</td>
                    <td style="text-align: center;">0</td>
                    <td style="text-align: center;">
                        <div class="btn-group btn-group-xs" role="group">
                            <button type="button" class="btn small btn-primary">Edit</button>
                        </div>
                    </td>
                </tr>
            </clientlistitem>
        </tbody>
    </table>
</div>

이것은, 다음의 내용을 올바르게 나타내고 있습니다.

예 2: 비인라인

다음은 저의 Vue 템플릿입니다.인라인 템플릿을 삭제하기 위한 코드의 변경 내용을 다음에 나타냅니다.

참조: https://jsfiddle.net/Ld47hoy2/

<template>
    <tr>
        <td>Test</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">
            <div class="btn-group btn-group-xs" role="group">
                <button type="button" class="btn small btn-primary">
                    Edit
                </button>
            </div>
        </td>
    </tr>
</template>
<script>
    export default {

    }
</script>

업데이트된 페이지 코드:

<div class="panel panel-primary">
    <div class="panel-heading">Current Clients</div>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Client Name</th>
                <th style="text-align: center;">No. Projects</th>
                <th style="text-align: center;">Time (7 days)</th>
                <th style="text-align: center;">Edit</th>
            </tr>
        </thead>
        <tbody>
            <clientlistitem></clientlistitem>
        </tbody>
    </table>
</div>

다만, 상기의 경우는, 다음과 같이 표시됩니다.

페이지 출력의 소스 코드를 보면 렌더링된 코드를 내 테이블 앞에 둔 것 같은데...?나는 이것이 다음 사이에 있을 것으로 예상한다.<tbody></tbody>태그..

Vue가 예상한 위치가 아닌 해당 위치로 코드를 출력할 이유가 있습니까?

여기서의 문제는 DOM 템플릿에서 템플릿은 브라우저에 의해 처음 렌더링되고 HTML 테이블에서는 내부에 특정 종류의 요소만 허용된다는 것입니다.그렇다면 구성 요소는clientlistitem처음에 테이블 외부에 렌더링된 후 Vue가 템플릿을 컴파일하여 컴포넌트가 잘못된 위치에 배치됩니다.

이 문제를 해결하려면 특수 속성을 사용합니다.

<tbody>
  <tr is="clientlistitem"></tr>
</tbody>

브라우저는 이를 받아들여 이 파일을 렌더링합니다.tr올바른 위치에 배치되어 있지만 Vue는 이를 컴포넌트로 해석합니다.

바이올린을 업데이트했습니다.

언급URL : https://stackoverflow.com/questions/46374317/vue-component-rendering-in-wrong-location