How do I add Internet Explorer 10 support to a simple VueJs component?

Question

I have a simple VueJs component I'm building that doesn't render at all in IE 10.

Background: The Vue component is a listing of company events, that supports basic filtering and sorting. Unfortunately, I have to support IE10. I am not using babel, but tried to use it in troubleshooting this problem - had no effect

The error I'm getting is 'city' is undefined. IE10 is the only browser experiencing this issue.

Here's a CodePen of just the relevant code. I've added comments to clarify what's going on. Here is just the JS (see CodePen for full code and better context):

/* Server rendered data */

var events = [{
        path: "events/residuals-biosolids",
        name: "Residuals & Biosolids Conference",
        sortDate: "1536165900000",
        startDate: "4 September 2018",
        endDate: "5 October 2018",
        displayDate: "September 4 - October 5, 2018",
        state: "WI",
        city: "Milwaukee",
        booth: "342",
        featuredImg: "https://cdn2.hubspot.net/hubfs/4299619/event%20thumb.png"
      }, {
        path: "events/bio-expo",
        name: "Biosolid Expo",
        sortDate: "1548979200000",
        startDate: "6 February 2019",
        endDate: "5 March 2019",
        displayDate: "February 6 - March 5, 2019",
        state: "MN",
        city: "Eagan",
        booth: "12",
        featuredImg: ""
      }, {
        path: "events/world-ag-expo",
        name: "World AG Expo",
        sortDate: "1549670400000",
        startDate: "7 February 2019",
        endDate: "2 February 2019",
        displayDate: "February 7 -  2, 2019",
        state: "CA",
        city: "Tulare",
        booth: "3815",
        featuredImg: ""
      }];
      var eventsDesc = [{
        path: "world-ag-expo",
        name: "World AG Expo",
        sortDate: "1549670400000",
        startDate: "7 February 2019",
        endDate: "2 February 2019",
        displayDate: "February 7 -  2, 2019",
        state: "CA",
        city: "Tulare",
        booth: "3815",
        featuredImg: ""
      }, {
        path: "bio-expo",
        name: "Biosolid Expo",
        sortDate: "1548979200000",
        startDate: "6 February 2019",
        endDate: "5 March 2019",
        displayDate: "February 6 - March 5, 2019",
        state: "MN",
        city: "Eagan",
        booth: "12",
        featuredImg: ""
      }, {
        path: "residuals-biosolids",
        name: "Residuals & Biosolids Conference",
        sortDate: "1536165900000",
        startDate: "4 September 2018",
        endDate: "5 October 2018",
        displayDate: "September 4 - October 5, 2018",
        state: "WI",
        city: "Milwaukee",
        booth: "342",
        featuredImg: "https://cdn2.hubspot.net/hub/4299619/hubfs/event%20thumb.png?width=760&name=event%20thumb.png"
      }];
      var selectedStates = ["CA", "MN", "WI", ];
      var selectedCities = ["Eagan", "Milwaukee", "Tulare", ];

      /*

      Vue code below

      */
      var app = new Vue({
       el: "#sg-events-wrapper",
       data: {
          message: "Hello Vue!",
          dateOrder: "ascending",
          selectedCity:"none",
          selectedState:"none",
    /*the data below is pulled from the script tag in the page.*/
          eventCities:selectedCities,
          eventStates:selectedStates,
          eventList: events,
          eventListDesc:eventsDesc,
       },
       computed: {
          eventsSorted:function(){
            /*chooses which server generated list to use for rendering events*/
             if(this.dateOrder=="ascending"){
                return this.eventList;
             }
             else{
                return this.eventListDesc; 
             }
          },

       },
       methods:{
         /*handles the visual filtering when someone sets city and or state*/
          isInStateAndCity:function(eventsCity,eventsState){
             var citiesMatch;
             var statesMatch;
             if(eventsCity == this.selectedCity || this.selectedCity=="none"){
                citiesMatch = true;
             }else{
                citiesMatch = false;
             }
             if(eventsState == this.selectedState ||this.selectedState=="none"){
                statesMatch = true;
             }else{
                statesMatch = false;
             }
             if(citiesMatch && statesMatch){
                return true;
             }else{
                return false;
             }

          }

       }
    });

Troubleshooting steps I've tried:

• Used babel, though my code originally isn't written that way.
• I used the babel-polyfill - did not seem to have an effect.
• I tried to place the js that's in the script tag in the body into the main JS file to see if there was an issue with the js file being loaded for some reason before the code in the HTML. Had no effect.

What I think could be causing the issue: IE10 doesn't like assigning property values to objects like I'm doing. Not certain of this. It's just a guess and I can't think of another way to do it.

Screenshot of IE 10 console error and failed rendering in CodePen in-case it helps.

If you have any ideas but don't have a way to test: I can test any changes and send back a recording of what I see and the console if it has errors.

Answer 1

Posting the answer myself, as others will likely come across this issue too, and there isn't much info out there.

There were two issues. My selectedCities and selectedStates arrays had a comma at the end. Newer browsers don't care about that, but <=IE10 do.

In addition there is a VueJS issue. Someone updated Vue JS to use a new regex string that IE 10 and down do not understand. The fix is to either use an older version of VueJS or replace the regex. Instructions at the source of where I found this info:

https://github.com/vuejs/vue/issues/7946#issuecomment-393713941