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>
  • 相关阅读:
    通过pwndbg看看c中局部变量是如何在stack上放置的 此外 printf %n的作用终于弄明白了
    pip 安装过慢 使用清华源 加速
    mac 10.15.6 安装 IDA
    使用机器学习检测命令行混淆
    安全技能树简版
    栈溢出 hack 入门例子 hello world
    201116西瓜书机器学习系列---8、集成学习
    legend2---某些js代码电脑浏览器支持,手机浏览器不支持的调试
    legend2---做题页的每个题目对应的答案重点标颜色
    legend2---jquery重新渲染某元素
  • 原文地址:https://www.cnblogs.com/mayiaction/p/11981578.html
Copyright © 2011-2022 走看看