vue一个下拉框值改变，另一个值清空

最近遇到一个问题，当我想在一个下拉框中选值时，另一个下拉框的值清空。可vue有个v-model属性，当我清空另一个下拉框v-model的值为空，就会再一次出发下拉框的@change事件，这样就会导致两个下拉框的值都为空，再次选择下拉框，里面的值才会出来，用户体验非常不好。自己想了好久，最后终于在同事的帮助下写了出来：

<template>中的html部分：

<el-select v-model="SO.a" clearable placeholder="请选择" @change="change('a',SO.a)">
	<el-option
		v-for="item in options"
		:label="item.label"
		:value="item.value"
		size="small">
	</el-option>
</el-select>

<el-select v-model="SO.b" clearable placeholder="请选择" @change="change('b',SO.b)">
	<el-option
		v-for="item in options1"
		:label="item.label"
		:value="item.value"
		size="small">
	</el-option>
</el-select>

 JS部分：

change(params,val) {
	console.log(params)
	if((params == 'a')&&(val != '')){
	      this.SO.b = '';
	}
	if((params == 'b')&&(val != '')){
		this.SO.a = '';
	}
}

出现这样问题的原因是，当我在JS中将v-model里的值置为空时，会接着调用change方法，这样就会接着将里面两个内容都清空。 再加一个参数为判断条件时，这样的问题就会避免。