使用Vue框架Select元素在ie11加载页面时显示异常

版权声明:本文为博主原创文章。如需转载,请注明出处: https://blog.csdn.net/chlung/article/details/81364090
<div id="app">
    <select id="sl" v-model="selected">
        <option disabled value="">请选择</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>

在ie11下通过F5或者地址栏刷新页面时显示:

ie9下显示:

解决方法

1.移除select元素的v-model绑定。

2.在vue提供的updated钩子函数中,把select元素的选中索引设置为 vue.data selected的值

3.为select绑定change事件,以便在修改select元素的值时能够同时更新vue.data selected的值

 修改后的代码:

<div id="app">
    <select id="sl">
        <option disabled value="">请选择</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 () {           //钩子函数,数据更新时触发
                //设置select元素的索引
                $("#sl").get(0).selectedIndex = this.selected;
        }
    })
    $(function(){
        vm.selected=2;
        $("#sl").change(function(){
            //实现选中select时,修改vue.data selected的值
            vm.selected = $("#sl").get(0).selectedIndex;
        });
    });
</script>

修改后,在ie11下通过F5或者地址栏刷新页面时显示:

ie9下显示同样没有问题:

 

展开阅读全文

没有更多推荐了,返回首页