iview的select变化的时候获取上一次选中的值

今天在使用iview的下拉框的时候，需要获取下拉框上一次选中的内容，翻了下官方的文档的下拉选择内容改变的事件，发现它并没有提供这个参数。

如下：

 

返回值就是这一次选择的内容。并没有我需要的下拉框改变前的内容。

本来是想加一个变量存储上次选择的内容，但是总感觉每次都要修改，太麻烦了。

想了想，官方可能有用上次选择的内容，只是没有暴露给使用者。扒了扒官方的数据结构，果然发现了有个字段会保存上次选择的数据（不过需要注意的是，这个数据在触发on-change事件的时候，才是改变前的数据，如果on-change事件结束，依然会被iview修改为这次选中的数据），代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
    <i-select ref="test" v-model="model1" style="width:200px" @on-change="mytest">
        <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
    </i-select>
</div>
<script>
    window.vm = new Vue({
        el: '#app',
        data: {
            cityList: [
                    {
                        value: 'New York',
                        label: '纽约'
                    },
                    {
                        value: 'London',
                        label: '伦敦'
                    },
                    {
                        value: 'Sydney',
                        label: '悉尼'
                    },
                    {
                        value: 'Ottawa',
                        label: '渥太华'
                    },
                    {
                        value: 'Paris',
                        label: '巴黎'
                    },
                    {
                        value: 'Canberra',
                        label: '堪培拉'
                    }
                ],
                model1: ''
        },
        methods: {
            mytest: function (val) {
                console.log("本次选择的内容"+val);
                //注意：需要给select标签设置ref，通过ref去获取数据
                console.log("上一次选择的内容"+vm.$refs.test.value);
                //如果想要获取输入框的内容，可能需要去遍历list了，根据value取label
                $(this.cityList).each(function(index,obj){
                    if(obj.value === vm.$refs.test.value){
                        console.log("上一次选择的输入框内容"+obj.label);
                    }
                })
            }
        }
    })
  </script>
</body>
</html>

 

 

 

posted @ 2019-12-04 11:04  发飙的蚂蚁  阅读(1510)  评论(0)  编辑  收藏  举报