title: How do I add Internet Explorer 10 support to a simple VueJs component?
body: <p>I have a simple VueJs component I'm building that doesn't render at all in IE 10. </p>
  
  <p><em>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</em></p>
  
  <p>The error I'm getting is <code>'city' is undefined</code>. IE10 is the only browser experiencing this issue.</p>
  
  <p><a href="https://codepen.io/thewebtech/pen/zJbeVy" rel="nofollow noreferrer">Here's a CodePen</a> 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):</p>
  
  <pre><code>/* Server rendered data */
  
  var events = [{
          path: "events/residuals-biosolids",
          name: "Residuals &amp; 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 &amp; 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&amp;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 &amp;&amp; statesMatch){
                  return true;
               }else{
                  return false;
               }
  
            }
  
         }
      });
  </code></pre>
  
  <p>Troubleshooting steps I've tried:</p>
  
  <ul>
  <li>Used babel, though my code originally isn't written that way.</li>
  <li>I used the babel-polyfill - did not seem to have an effect.</li>
  <li>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.</li>
  </ul>
  
  <p>What I <em>think</em> 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.</p>
  
  <p>Screenshot of IE 10 console error and failed rendering in CodePen in-case it helps. </p>
  
  <p>If you have any ideas but don't have a way to test: <strong>I can test any changes and send back a recording of what I see and the console if it has errors.</strong></p>