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

问题描述

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

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：

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：

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}]}
  }
})

在实际项目中，未知的循环汽车的长度是不可避免的。
您可以看到该示例在Chrome和Firefox中正常工作，但在IE中无效。

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.

联系Vue开发团队后，他们告诉我模板标签只是在IE的tr中不接受，我需要使用基于字符串的模板。然而，在使用Vue组件进行实验之后，结果表明Vue也不允许在模板中使用多个根元素。
此处链接到Vue票证（已关闭）： https://github.com/vuejs / vue / issues / 7243

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

这样做有什么好方法可以让它在IE上运行？

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

推荐答案

Evan认为您将组件声明为html，然后将Vue挂载到它。这就是IE11的问题：浏览器在知道任何关于Vue的事情之前首先处理html，并在到达模板标签时达到严重错误，然后继续处理js 。为了使IE处理模板标签，您必须从Vue将其提供给浏览器，因此Vue可以进行解释。这就是为什么建议使用基于字符串的模板：Vue将模板作为字符串，然后将浏览器HTML显示出来。

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.

然后当你接受时， Vue只能有一个模板的根元素。解决方案是继续退出DOM树，直到有一个根元素。在这种情况下，我建议只将整个表格作为模板。然后你会有：

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：

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',
});

和html：

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

我更新了 jsfiddle 来反映这一点。

I've updated the jsfiddle to reflect this.

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