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 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: '\
    \
        \
        \
            \
        \
      \
      \
        \
          \
        \
      \
    
{{title}}
',
});

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

and html:

I've updated the jsfiddle to reflect this.