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

自己发布答案，因为其他人也可能会遇到这个问题，并且没有太多信息。

有两个问题。我的 selectedCities 和 selectedStates 数组的末尾有一个逗号。较新的浏览器不关心这一点，但 <=IE10 关心。

此外还有一个 VueJS 问题。有人更新了 Vue JS 以使用 IE 10 及以下版本不理解的新正则表达式字符串。解决方法是使用旧版本的 VueJS 或替换正则表达式。我找到此信息的来源的说明：

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