iview一个下拉选项Select可以踩到这么多坑?

最近在做前端一个下拉选项的功能.

如图,选择软件时,后面的下拉框可以从后端获取对应的软件列表

这里用的是vue+iview框架的select.

<Select v-model="model1" style="width:200px"  @on-change: "getType">
    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>

---

第一个坑就是,要设置一个@on-change 事件,当变动选项时,会执行对应的方法getType().

但是一直绑定不到对应的方法,原来是method中,在getType方法前的一个大括号先把method()结束了.

导致getType()变成了一只野生的属性,所以才一直绑定不到.大概就是下面这个样子

export default {
 mounted () {
    this.query(this.current)
  },
  data () {
    return {
      // 初始化信息总条数
      total: 0,
      // 每页显示多少条
      size: 10,
      // 初始化页码
      current: 1,
      }
  },
 method(){
 	query(){
 		...
 	}
 	creat(){
 	...
 	},
 },
 getType(){
	...
}
      
}

简直就是防不胜防啊!不过后面发现,idea在鼠标点击这个大括号后,就会在上面显示一下对应哪个括号.

之前搞后端因为没有这么多大括号,所以一直没留意!害!

第二个坑,那个select不是绑定一个model1!吗!然后选项Option从一个集合中遍历生成!

然后我就建了一个typeList放一下基本的数据.

      typeList: [
        {
          key: 1,
          value: '服务器'
        },
        {
          key: 2,
          value: '软件'
        },
        {
          key: 3,
          value: '项目'
        }
      ]

然后建了一个typeModel用来绑定!

  typeModel: {
    key: 0,
    value: '未知'
  },

鬼知道一直报一个错误!

type check failed for prop "value". Expected String, Number, Array, got Obje

大意就是这个值需要的是字符串类型/数字类型/数组类型,但是我给他传了一个对象!

给我整懵逼了!唉声叹气,旁边长老看不下去了,帮我找出了问题所在!

就是select绑定也要是数组!于是他把typeModel里的数据改成了数组结构!

问题解决了!

---

然后我想省点事!把select指向这个option便利的集合!

<Select v-model="typeList" style="width:100px" placeholder="请选择一级栏目" @on-change="getServiceType">

然后又出现新坑了!

我在选择选项后,竟然执行了两遍getType方法,一开始百思不得其解,

以为又是异步惹的错,因为第二次执行个getType的参数为空,我还以为是异步太快了,没获取到参数.

但又不是,后面尝试着把绑定的model去掉,就只执行一次!

其实官方文档也是没有绑定同一个对象的!所以害!坑死了!自己把自己坑了!