I am facing an issue with the rendering of a table in a simple Vue instance. The document displays correctly on Firefox and Chrome, however, I encounter an error in IE11:
[Vue warn]: Error when rendering root instance.
I assumed that Vue is compatible with 'modern browsers', but I couldn't find any compatibility information in the Vue documentation.
Do you have any suggestions on how to resolve this problem?
// initialization
var notesView = new Vue({
el: '#demo',
data: {
notes: []
},
methods: {
}
});
notesView.notes = JSON.parse('[{"noteTime":"2018-07-30T22:00:00.000Z","locationName":"Q3000010","noteText":"NoteText0"},{"noteTime":"2018-07-31T22:00:00.000Z","locationName":"Q3000020","noteText":"NoteText1"}]');<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="demo">
<div v-if="notes.length > 0">
<table class="table table-bordered">
<tbody>
<template v-for="(note,index) in notes">
<tr class="condensed" :class="index % 2 === 0 ? 'odd' : ''">
<td width="150px">
{{ note.noteTime }}
</td>
<td>
{{ note.locationName }}
</td>
</tr>
<tr :class="index % 2 === 0 ? 'odd' : ''">
<td colspan="2">
{{ note.noteText }}
</td>
</tr>
</template>
</tbody>
</table>
</div>
<div v-else="">
<div class="alert alert-warning" role="alert">
There are no notes here yet...
</div>
</div>
</div>