Tengo un ejemplo muy simple, tomado de la primera página de la guía Vue - https://vuejs.org/v2/guide/ He modificado su ejemplo, parece que su ejemplo original funciona para mostrar elementos <ol> <li> , lo he modificado para mostrar elementos <div> y funciona bien, pero no importa lo que intente, no quiere mostrar datos <tr><td> . En el código a continuación, app1 funciona bien, mientras que app-7 no funciona; ya intenté modificarlo de varias maneras, simplificándolo incluso hasta el punto en que quería obtener un solo <td> para renderizar, pero nada parece funcionar. ¿Porqué es eso? Mi código:

html:

 <table id="app-7"> <thead> <tr> <td> id </td> </tr> </thead> <tbody> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item> </tbody> </table> <div id="app1"><test-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></test-item></div>

js:

 Vue.component('todo-item', { props: ['todo'], template: '<tr><td>{{ todo.text }}</td></tr>' }); Vue.component('test-item', { props: ['todo'], template: '<div><div>{{ todo.text }}</div><div>{{ todo.text }}</div></div>' }); window.addEventListener('load', function () { var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }); var app1 = new Vue({ el: '#app1', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }); })