在 IE 11 中循环一段代码 [英] Looping a block of code in IE 11

问题描述

对于一个项目，我需要遍历 JavaScript 中给出的对象列表，并在 html 表中水平显示它们.这里的例子:https://jsfiddle.net/50wL7mdz/83227/

html:

<表格><thead><tr><td colspan='5'>{{body.title}}</td></tr></thead><tr><template v-for='car in body.cars'><td>{{car.make}}</td><td>{{car.model}}</td><td>{{car.year}}</td></tr></tbody>

javascript:

 new Vue({el: '#app',数据: {正文:{标题:'测试标题'，汽车:[{制造:'本田'，型号:'思域'，年份:2010}，{品牌:'丰田'，型号:'凯美瑞'，年份:2012}，{品牌:'日产'，型号:'Versa'，年份:2014}]}}})

在实际项目中，车"的长度未知，所以循环是在所难免的.您可以看到该示例在 Chrome 和 Firefox 中运行良好，但在 IE 中不起作用.

联系 Vue 开发团队后，他们告诉我 IE 的tr"中根本不接受模板标签，我需要改用基于字符串的模板.然而，在对 Vue 组件进行试验后，事实证明 Vue 也不允许模板中存在多个根元素.此处链接到 Vue 票证(已关闭):https://github.com/vuejs/vue/issues/7243

有什么好方法可以做到这一点并使其在 IE 上也能运行?

解决方案

Evan 发现您将组件声明为 html，然后将 Vue 安装到它.这就是 IE11 的问题:浏览器在了解 Vue 之前首先处理 html，并在到达 template 标签时遇到严重错误，然后再继续处理 js.为了让 IE 处理模板标签，你必须从 Vue 把它交给浏览器，这样 Vue 就可以做解释了.这就是为什么推荐基于字符串的模板:Vue 将模板作为字符串，然后给浏览器 HTML 显示.

然后，正如您所了解的那样，Vue 模板只能有一个根元素.解决方案是不断退出 DOM 树，直到您拥有一个根元素.在这种情况下，我建议只将整个表格作为模板.然后你会:

javascript:

Vue.component('car-table', {数据:函数(){返回 {title: '测试标题',汽车: [{制作:'本田'，型号:'思域'，年份:2010}, {制作:'丰田'，型号:凯美瑞"，年份:2012}, {制作:'日产'，型号:'Versa',年份:2014}]};},模板: '<表格><头><td colspan="5">{{title}}</td></tr></thead><模板 v-for="汽车中的汽车"><td>{{car.make}}</td><td>{{car.model}}</td><td>{{car.year}}</td></模板></tr></tbody></table>',});新的 Vue({el: '#app',});

和 html:

<car-table></car-table>

我已经更新了 jsfiddle 以反映这一点.

For a project, I need to loop through a list of objects given in javascript, and display them horizontally in a html table. Example here: https://jsfiddle.net/50wL7mdz/83227/

html:

<div id="app">
  <table>
  <thead><tr><td colspan='5'>{{body.title}}</td></tr></thead>
  <tbody>
    <tr>
      <template v-for='car in body.cars'>
        <td>{{car.make}}</td>
        <td>{{car.model}}</td>
        <td>{{car.year}}</td>
      </template>
    </tr>
  </tbody>
  </table>
</div>

javascript:

 new Vue({
  el: '#app',
  data: {
    body: {title : 'test title',
    cars: [{make: 'Honda', model: 'Civic', year: 2010},
    {make: 'Toyota', model: 'Camry', year: 2012},
    {make: 'Nissan', model: 'Versa', year: 2014}]}
  }
})

In the actual project, the length of "cars" in unknown so looping is unavoidable. You can see the example works fine in Chrome and Firefox, but not working in IE.

After contacting Vue dev team, they informed me that template tag simply isn't accepted in "tr" of IE, and I need to use string based templates instead. However after experimenting with Vue components, turns out Vue also doesn't allow multiple root elements in a template. Link to Vue ticket here (closed): https://github.com/vuejs/vue/issues/7243

What would be a good way to do this and make it work on IE as well?

解决方案

Evan picked up that you were declaring the component as html and then mounting Vue to it. That is the problem with IE11: the browser first processes the html before knowing anything about Vue and reaches a critical error when it reaches the template tag, before going on to process the js. In order to make IE process the template tag you have to give it to the browser from Vue, so Vue can do the interpreting. This is why a string-based template is recommended: Vue takes the template as a string and then gives the browser HTML to display.

Then as you've picked up, Vue can only have one root element for a template. The solution is to keep backing out of the DOM tree until you have one root element. In this case I propose just making the entire table the template. Then you would have:

javascript:

Vue.component('car-table', {
  data: function () {
      return {
        title: 'test title',
        cars: [{
          make: 'Honda',
          model: 'Civic',
          year: 2010
        }, {
          make: 'Toyota',
          model: 'Camry',
          year: 2012
        }, {
          make: 'Nissan',
          model: 'Versa',
          year: 2014
        }]
      };
    },
    template: '
    <table>
        <thead>
        <tr>
            <td colspan="5">{{title}}</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <template v-for="car in cars">
          <td>{{car.make}}</td><td>{{car.model}}</td><td>{{car.year}}</td>
          </template>
        </tr>
      </tbody>
    </table>',
});

new Vue({
  el: '#app',
});

and html:

<div id="app">
  <car-table></car-table>
</div>

I've updated the jsfiddle to reflect this.

这篇关于在 IE 11 中循环一段代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！