v-for在IE11上产生错误 [英] v-for produces error on IE11

问题描述

我有一个简单的vue实例，该实例从数据数组生成表.文档在Firefox和Chrome上可以正常显示，但是在IE11中出现错误:

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警告]:呈现根实例时出错.

[Vue warn]: Error when rendering root instance.

我认为Vue与现代浏览器"兼容，但是当开始在vue文档中查找兼容性信息时，我什么都没找到.

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>

推荐答案

这对我有用.我正在使用x-template脚本绕过IE11的限制-损害了代码的可读性，并且需要特别注意IE ...

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>

这篇关于v-for在IE11上产生错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！