Day18 iView 选择器 select传值

select组件默认传value值到on-change事件里
如果想传整个对象，有两种方法
1.通过给每一个option绑定点击事件传值
@click.native="yourMethod(obj)"
代码运行地址：iView run

<!-- select -->
<template>
  <div>
    <Select
      v-model="model1"
      style="width:200px"
      @on-change="selectChange"
    >
      <!-- :value="item.value" 方便双向绑定 -->
      <!-- :value="item" 方便传值 -->
      <Option
        v-for="item in cityList"
        :value="item"
        :key="item.value"
        @click.native="optionClick(item)"
      >{{ item.label }}</Option>
    </Select>
    <div>{{selectString}}</div>
    <div>{{optionString}}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      selectString: "selectString",
      optionString: "optionString",
      cityList: [
        {
          value: 'New York',
          label: '纽约',
          otherProperty: 0
        },
        {
          value: 'London',
          label: '伦敦',
          otherProperty: 1
        },
        {
          value: 'Sydney',
          label: '悉尼',
          otherProperty: 2
        },
        {
          value: 'Ottawa',
          label: '渥太华',
          otherProperty: 3
        },
        {
          value: 'Paris',
          label: '巴黎',
          otherProperty: 4
        },
        {
          value: 'Canberra',
          label: '堪培拉',
          otherProperty: 5
        }
      ],
      model1: "Sydney"
    }
  },
  methods: {
    selectChange (val) {
      console.log('selectChange', val);
      this.selectString = JSON.stringify(val);
    },
    optionClick (item) {
      console.log('optionClick', item);
      this.optionString = JSON.stringify(item);
    }
  }
}
</script>

2.可以把整个对象赋值到value上进行返回，不过这样一来，编辑的时候进行双向绑定就不好操作
推荐使用1方法
参考：iView的Select选择框