Get on a selected value when the select changes iview

Today in the use of drop-down box iview, we need to get a drop-down box on the selected content, turn the pull-down selection change events with official documents and found that it does not provide this parameter.

as follows:

Returns the value of the contents of this once selected. I did not need the drop-down box to change the contents ago.

Wanted to add a variable to store the last selected content, but the overall feeling every time changes too much trouble.

I thought, official last selected content may be useful, but not exposed to the user. Grilled chops official data structure, it was found that there is a data field will save the last selected ( But note that this data when trigger on-change event, is the data before the change, if on-change the event is over, they may still be modified iview to the selected data ), as follows:

<!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: ' London ' 
                    }, 
                    { 
                        value: ' Sydney ' , 
                        label: ' Sydney ' 
                    }, 
                    { 
                        value: ' Ottawa ' , 
                        label: ' Ottawa ' 
                    }, 
                    { 
                        value: ' Paris ' ,
                        label: ' Paris ' 
                    }, 
                    { 
                        value: ' Canberra ' , 
                        label: ' Canberra ' 
                    } 
                ], 
                MODEL1: '' 
        }, 
        Methods: { 
            mytest: function (Val) { 
                the console.log ( " contents of the selected " + Val);
                 // NOTE: ref needs to be set to select the label, to acquire data by ref 
                the console.log ( "The last time the selected content " + . Vm $ refs.test.value);
                 // If you want to get the contents of the input box, you may need to traverse the list, according to the value taken label 
                $ ( the this .cityList) .each ( function ( index, obj) {
                     IF (obj.value === VM refs.test.value $) {. 
                        the console.log ( " the last selected input box content " + obj.label); 
                    } 
                }) 
            } 
        } 
    }) 
  < / Script > 
</ body > 
</ HTML >

Get on a selected value when the select changes iview

Guess you like