v-for produces error on IE11 [duplicate]

Question

This question already has an answer here:

• Looping a block of code in IE 11 3 answers

I have a simple vue instance which produces table from data array. Document renders fine on Firefox and Chrome but in IE11 i'm getting an error:

[Vue warn]: Error when rendering root instance.

I thought Vue is compatible with 'modern browsers' but when started to find compatibility information inside vue documentation I found nothing.

Anyway, do you have any ideas on how to solve this issue?

        // initializing
        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>

Answer 1

Here's what worked for me. I'm using x-template script to bypass IE11 limitations - that compromises code readability and a need of special care for IE...

// initializing grid control
        var notesView = new Vue({
            el: '#notes',
            template: '#v-notes-view',
            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="notes">
</div>
<script type="text/x-template" id="v-notes-view">
<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>
</script>