After testing it with various browsers such as Chrome, Firefox, Opera, and Internet Explorer, I noticed that the error only occurs in Firefox.
In my Vue.js code, I have two computed properties that change almost simultaneously. When I modify my select box, both properties are triggered because this.gekozenWinding changes when a different option is selected in the box.
Below is the code for both properties:
kant() {
if (this.gekozenWinding != null) {
var id = this.haalID(this.windings, this.gekozenWinding);
parseInt(id);
if (id < 5 && id > 0) return true;
else {
return false;
}
}
},
graden() {
if (this.gekozenWinding != null) {
var id = this.haalID(this.windings, this.gekozenWinding);
switch (id) {
case "1":
return "180"; break;
case "2":
return "0"; break;
case "3":
return "270"; break;
case "4":
return "90"; break;
case "5":
return "180"; break;
case "6":
return "0"; break;
case "7":
return "270"; break;
case "8":
return "90"; break;
}
} else {
return "0";
}
}
My method haalID():
haalID(lijst, item) {
/*
1.Filters out given item(string) from a lijst(array).
2.Gets the ID from the filtered object.
3. returns the ID
*/
var id = lijst.filter(i => i.Descriptions[0].Description == item);
id = id[0].Id;
return id;
}
This is inside my template:
<div class="row">
<div class="form-group col-9">
<label>Winding</label>
<select
class="form-control"
v-model="gekozenWinding"
>
<option
v-for="winding in windings"
v-bind:key="winding.Id"
>{{winding.Descriptions[0].Description}}</option>
</select>
</div>
</div>
<div v-if="gekozenWinding != null && gekozenWinding != 'To determine'">
<div class="parent1" v-if="kant ">
<img id="fto1" src="../assets/buitenkant.png" alt>
<img
id="fto2"
v-bind:style="{'transform': `rotate(${graden}deg)`}"
src="../assets/A.png"
alt
>
</div>
<div class="parent2" v-else>
<img id="fto3" src="../assets/Binnenkant.png" alt>
<img
id="fto4"
v-bind:style="{'transform': `rotate(${graden}deg)`}"
src="../assets/A.png"
alt
>
</div>
</div>
The issue only arises in Internet Explorer version 11, while other browsers work perfectly fine. I've made multiple attempts to modify the code but can't seem to get it to function correctly in IE.