Vue: Component per row with inline-template

[dan-iway]

What problem does this feature solve?

At the moment it seems to be impossible to create one component per row in a table using inline templates.

If have collected my unsuccessful attempts in this fiddle: https://jsfiddle.net/hfu0zccs/

This is the link where it was suggested by LinusBorg to open an issue but apparently that never happended?

What does the proposed API look like?

Considering the limitations involved with restrictions of allowed elements in tables this would seem to be the most likely to be supported? Although it is pretty ugly form my understanding this would be valid html and honor the 1 child only requirement of vue.

   <table>
      <tr is="table-row" inline-template>
        <template>
          <tr>
            <td>{{ content }}</td>
            <td>{{ content }}</td>
          </tr>
        </template>
      </tr>
    </table>

[posva]

When dealing with tables in html templates in general, you have to be careful about what the browser is doing with the HTML before Vue gets to parse it. If you take out Vue, and take a look at the HTML, you will see what Vue sees before it gets the templates and this will help you understand why the one with a template doesn't work: it creates a DocumentFragment. I think this should be fixable but I haven't checked if it behaves consistently among browsers

[yyx990803]

inline-template is a frozen feature and will likely be deprecated in the future. We will not be adding changes or improvements to it.