Question

对于一个项目，我需要循环遍历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}]}
  }
})

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

在联系Vue开发团队后，他们告诉我模板标签根本不被接受＆＃34; tr＆＃34;的IE，我需要使用基于字符串的模板。然而，在尝试使用Vue组件之后，Vue也不允许在模板中使用多个根元素。此处链接到Vue票证（已关闭）：https://github.com/vuejs/vue/issues/7243

这样做的好方法是什么，并使其适用于IE？

Answer 1

Evan认为您将该组件声明为html然后将Vue挂载到它。这就是IE11的问题：浏览器在了解Vue之前首先处理html，并在到达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以反映这一点。

Answer 2

埃文在这个问题上给出了答案。使用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])
}

Answer 3

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

我认为你目前无法做到这一点。 IE根本不允许使用模板标签，因此执行此操作的唯一方法是使用<tr is="component-name">并使用单独的组件（具有单个根元素），该组件可应用于tr或{{1} }。循环遍历每个元素并且每次添加3 td s无法完成。

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

在IE 11中循环一段代码

3 个答案: