Vuejs не отображает компоненты внутри элементов таблицы HTML

Question

Я хочу отобразить пользовательский компонент, который отображает строку внутри таблицы.

У меня есть следующий код:

// js file
Vue.component('message-row', {
    data: function () {
        return {
            msg: 'Hello'
        }
    },
    template: '<tr><td>{{ msg }}</td></tr>'
});

new Vue({
  el: '#app'
});


// html file
<div id="app">
    <table><message-row></message-row></table>
</div>

Проблема состоит в том, что строка в конечном итоге отображается внеТаблица!Например:

<div id="app">
    <tr><td>Hello</td></tr>
    <table></table>
</div>

Вы можете проверить это в этом JSFiddle https://jsfiddle.net/eciii/7v6yrf3x/

Я не уверен, является ли это ошибкой или я просто упускаю что-то действительно очевидное здесь...

Answer 1

См. Документацию Vue.js о Предупреждение о разборе шаблонов 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>

Вам необходимо добавить компонент, используя атрибут is следующим образом.

<table><tr is="message-row"></tr></table>

См. https://jsfiddle.net/7v6yrf3x/1/.