Use the Vue framework Select element to display an exception when ie11 loads the page

<div id="app">
    <select id="sl" v-model="selected">
        <option disabled value="">Please choose</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
    </select>
    <span>Selected: {{selected }}</span>
</div>
<script>
     var vm = new Vue({
        el: '#app',
        data: {
            checked:true,
            selected:1
        }
    })
    $(function(){
        vm.selected=2;
    });
</script>

When you refresh the page through F5 or address bar under ie11:

ie9 displays:

resolvent:

1. Remove the v-model binding of the select element.

2. In the updated hook function provided by Vue, set the selected index of the select element to the value of vue.data selected

3. Bind the change event to select, so that the value of vue.data selected can be updated at the same time when the value of select element is modified

Modified code:

<div id="app">
    <select id="sl">
        <option disabled value="">Please choose</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
    </select>
    <span>Selected: {{selected }}</span>
</div>
<script>
     var vm = new Vue({
        el: '#app',
        data: {
            checked:true,
            selected:1
        },
        updated: function () {           //Hook function, triggered when data is updated
                //Set index of select element
                $("#sl").get(0).selectedIndex = this.selected;
        }
    })
    $(function(){
        vm.selected=2;
        $("#sl").change(function(){
            //When select is selected, modify the value of vue.data selected
            vm.selected = $("#sl").get(0).selectedIndex;
        });
    });
</script>

After modification, it will be displayed when the page is refreshed through F5 or address bar under ie11:

There is no problem in ie9:

 

Tags: Vue

Posted on Sat, 11 Jan 2020 08:06:15 -0800 by rachwilbraham