а затем стиль TD, чтобы выглядеть как 3 столбца.
роекта мне нужно перебрать список объектов, приведенных в javascript, и отобразить их горизонтально в виде таблицы html. Пример здесь:https://jsfiddle.net/50wL7mdz/83227/
HTML:
<div id="app">
<table>
<thead><tr><td colspan='5'>{{body.title}}</td></tr></thead>
<tbody>
<tr>
<template v-for='car in body.cars'>
<td>{{car.make}}</td>
<td>{{car.model}}</td>
<td>{{car.year}}</td>
</template>
</tr>
</tbody>
</table>
</div>
JavaScript:
new Vue({
el: '#app',
data: {
body: {title : 'test title',
cars: [{make: 'Honda', model: 'Civic', year: 2010},
{make: 'Toyota', model: 'Camry', year: 2012},
{make: 'Nissan', model: 'Versa', year: 2014}]}
}
})
В реальном проекте длина «автомобилей» неизвестна, поэтому зацикливание неизбежно. Вы можете видеть, что пример отлично работает в Chrome и Firefox, но не работает в IE.
После связи с командой разработчиков Vue они сообщили мне, что тег шаблона просто не принят в «tr» IE, и мне нужно вместо этого использовать строковые шаблоны. Однако после экспериментов с компонентами Vue оказывается, что Vue также не допускает наличие нескольких корневых элементов в шаблоне. Ссылка на билет Vue здесь (закрыта):https://github.com/vuejs/vue/issues/7243
Что было бы хорошим способом сделать это и заставить это работать на IE также?