在IE 11中循环一段代码

Posted 2021-03-31

对于一个项目，我需要循环遍历javascript中给出的对象列表，并在html表中水平显示它们。示例：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}]}
  }
})

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

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

什么是一个很好的方法来做到这一点，并使其在IE上工作？

答案

Evan知道你将组件声明为html，然后将Vue挂载到它上面。这就是IE11的问题：浏览器首先处理html，然后才知道Vue的任何内容，并在到达template标签时达到严重错误，然后继续处理js。为了使IE处理模板标签，您必须从Vue将其提供给浏览器，因此Vue可以进行解释。这就是推荐使用基于字符串的模板的原因：Vue将模板作为字符串，然后显示浏览器HTML。

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

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以反映这一点。

另一答案

埃文在这个问题上给出了答案。使用string template。

new Vue({
  el: '#app',
  template: "
  <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>",
  data: {
    body: {title : 'test title',
    cars: [{make: 'Honda', model: 'Civic', year: 2010},
    {make: 'Toyota', model: 'Camry', year: 2012},
    {make: 'Nissan', model: 'Versa', year: 2014}]}
  }
})

丑陋，看起来它确实在IE中工作。你也可以写一个render function。

render: function(h){
  let cells = []
  for (var i=0; i < this.body.cars.length; i++){
    cells.push(h("td", this.body.cars[i].make))
    cells.push(h("td", this.body.cars[i].model))
    cells.push(h("td", this.body.cars[i].year)) 
  }

  let header = h("thead", [h("tr", [h("td", {attrs: {colspan: 5}}, [this.body.title])])])
  let body = h("tbody", [h("tr", cells)])

  return h("table", [header, body])
}

另一答案

编辑：不要读这个，它只适用于Vue 1！

我认为你目前无法做到这一点。 IE根本不允许模板标签，所以唯一的方法是使用<tr is="component-name">并有一个单独的组件（具有单个根元素），可以应用于tr或td。循环每个元素并且每个添加3个tds是不可能的。

同样，在is或tr上使用td属性是当前的解决方案，但这不允许您请求的多根组件。也许您可以为每辆车创建一个组件并执行<td is="car-component">，然后将TD设置为3列。