zoukankan      html  css  js  c++  java
  • 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="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>
  • 相关阅读:
    DigitalOcean上使用Tornado+MongoDB+Nginx+Supervisor+DnsPod快速搭建个人博客
    创业三年来的一些感想
    创业三年来的一些感想
    ViEmuVS2013-3.2.1 破解
    瘋子C语言笔记(指针篇)
    瘋子C语言笔记(结构体/共用体/枚举篇)
    瘋子C++笔记
    petalinux add pre-build application to rootfs compile faliure solution
    QA Issue: No GNU_HASH in the elf binary
    视觉SLAM——特征点法与直接法对比以及主流开源方案对比 ORB LSD SVO DSO
  • 原文地址:https://www.cnblogs.com/mayiaction/p/11981578.html
Copyright © 2011-2022 走看看