javascript - Vuejs doesn't render components inside HTML table elements - Stack Overflow

admin管理员组

文章数量:1242825

I want to render a custom ponent that displays a row inside a table.

I have the following code:

// js file
Vueponent('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>

The problem is that the row ends up rendered outside the table! Like this:

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

You can check it out in this JSFiddle /

I'm not sure if this is a bug or I'm just missing something really obvious here...

I want to render a custom ponent that displays a row inside a table.

I have the following code:

// js file
Vue.ponent('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>

The problem is that the row ends up rendered outside the table! Like this:

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

You can check it out in this JSFiddle https://jsfiddle/eciii/7v6yrf3x/

I'm not sure if this is a bug or I'm just missing something really obvious here...

• javascript
• vue.js
• vuejs2

Share Improve this question Follow asked Jun 8, 2018 at 11:47 eciiieciii 31733 silver badges1010 bronze badges 2

• The browser tries to "fix" your HTML by moving the unknown tag out of the table, before Vue has a chance to change it. – user5734311 Commented Jun 8, 2018 at 11:52
• @ChrisG Do you know a solution? The main point of using ponents is to be able to use them like this isn't it? – eciii Commented Jun 8, 2018 at 11:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 17

See Vue.js's documentation about DOM Template Parsing Caveats (Vue3):

Some HTML elements, such as <ul>, <ol>, <table> and <select> have restrictions on what elements can appear inside them, and some elements such as <li>, <tr>, and <option> can only appear inside certain other elements.

This will lead to issues when using ponents with elements that have such restrictions. For example:

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

The custom ponent <blog-post-row> will be hoisted out as invalid content, causing errors in the eventual rendered output. Fortunately, the is special attribute offers a workaround:

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

You need to add the ponent using the is attribute as follows.

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

See https://jsfiddle/7v6yrf3x/1/.

本文标签： javascriptVuejs doesn39t render components inside HTML table elementsStack Overflow