Skip to content
Advertisement

Vuejs doesn’t render components inside HTML table elements

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

I have the following code:

JavaScript

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

JavaScript

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

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

Advertisement

Answer

See Vue.js’s documentation about DOM Template Parsing Caveats:

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 components with elements that have such restrictions. For example:

JavaScript

The custom component <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:

JavaScript

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

JavaScript

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

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement