[Vuejs]-V-for produces error on IE11

by

0👍

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>
👤IT Man

Leave a comment