v-for 在 IE11 上产生错误 [重复]答案

【问题标题】：v-for produces error on IE11 [duplicate]v-for 在 IE11 上产生错误 [重复]
【发布时间】：2018-08-01 05:30:12
【问题描述】：

我有一个简单的 vue 实例，它从数据数组中生成表。文档在 Firefox 和 Chrome 上呈现良好，但在 IE11 中我收到错误：

[Vue 警告]：渲染根实例时出错。

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

不管怎样，你对如何解决这个问题有什么想法吗？

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

【问题讨论】：

支持 IE11（仅从 IE8 开始，事情开始变得可怕/无法解决），我已经将它与通过 babel 拉取的组件一起使用。 IE11 的控制台是否提供有关错误的更多信息？
不多：“索引”未定义（或类似的 i 控制台是波兰语）
IE11 does not support template tags。您需要将模板移动到字符串模板中，或使用渲染函数。
好的，我会检查语法。我不想为此定义单独的组件。
@Bert 不定义新组件可以吗？

标签： javascript vue.js internet-explorer-11

【解决方案1】：

这对我有用。我正在使用 x-template 脚本绕过 IE11 的限制——这会损害代码的可读性并且需要特别注意 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>

【讨论】：