Looping a block of code in IE 11

Question

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/

Answer 1

Evan gives the answer in the issue. Use a string template.

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

Ugly as that looks it does work in IE. You could also write a 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])
}