I am facing an issue with a VueJs component that is not rendering in IE 10.
Context: The Vue component I am working on is a company events list with basic filtering and sorting functionalities. Unfortunately, IE10 support is required for this project. Even after trying to troubleshoot using babel, the problem persists.
The specific error message I am encountering is 'city' is undefined, and it occurs only in IE10.
For reference, you can view the relevant code on CodePen. I have included comments in the code to explain the situation. Here's a snippet of the JS (refer to CodePen for complete code and context):
/* Server rendered data */
var events = [...]; // Data for events
var eventsDesc = [...]; // Data for events sorted in descending order
var selectedStates = [...]; // Array of selected states
var selectedCities = [...]; // Array of selected cities
/* Vue instance creation below */
var app = new Vue({
el: "#sg-events-wrapper",
data: {
message: "Hello Vue!",
dateOrder: "ascending",
selectedCity:"none",
selectedState:"none",
eventCities:selectedCities,
eventStates:selectedStates,
eventList: events,
eventListDesc:eventsDesc,
},
computed: {
eventsSorted:function(){
if(this.dateOrder=="ascending"){
return this.eventList;
}
else{
return this.eventListDesc;
}
},
},
methods:{
isInStateAndCity:function(eventsCity,eventsState){
... // Method for visual filtering based on city and state selections
}
}
});
Steps taken for troubleshooting:
- Attempted to use Babel despite original code structure.
- Used babel-polyfill but saw no improvement.
- Moved script tag content from HTML body to main JS file to check loading order - no change observed.
Potential cause identified: Speculation that IE10 may have issues with assigning object property values as done in the code. This is a hypothesis, and I am open to alternative solutions.
Attached are screenshots of the IE 10 console error and failed rendering in CodePen for reference.
If you have any suggestions or require testing assistance: I am willing to implement changes and provide feedback with recordings and console reports.