I have a simple VueJs ponent I'm building that doesn't render at all in IE 10.
Background: The Vue ponent is a listing of pany 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 ments 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: ".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: ".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,
},
puted: {
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.
I have a simple VueJs ponent I'm building that doesn't render at all in IE 10.
Background: The Vue ponent is a listing of pany 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 ments 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/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/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,
},
puted: {
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.
Share Improve this question edited Jan 30, 2020 at 19:55 leonheess 21.7k19 gold badges94 silver badges137 bronze badges asked Sep 24, 2018 at 14:24 TheWebTechTheWebTech 2392 silver badges15 bronze badges 4-
1
Post your
.babelrc. – connexo Commented Sep 24, 2018 at 14:35 - @connexo I'm not actually using babel I tried it as a troubleshooting step but it had no effect. I have no babelrc file. I will clarify my post to note that. – TheWebTech Commented Sep 24, 2018 at 14:38
- 1 Can you give codepen.io/connexo/pen/oPRGNp?editors=1111 a shot in IE 10? – connexo Commented Sep 24, 2018 at 14:53
- No change in result spin.d.pr/FZXbeU (screencast of IE10 of your pen) Thank you for trying! – TheWebTech Commented Sep 24, 2018 at 14:57
1 Answer
Reset to default 5Posting the answer myself, as others will likely e across this issue too, and there isn't much info out there.
There were two issues. My selectedCities and selectedStates arrays had a ma 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./vuejs/vue/issues/7946#issuement-393713941