vue踩坑记20201027
elemeui/antd等框架，再使用复选框、下拉选择框时，如果通过v-model绑定了值，那么选择时，界面不会改变。
方法一：使用default-value指定默认值，@change去改变本该v-model的值，但是这样表单验证无法使用，而且如果一个界面上有多个相同元素，则无法联动
<template>
<div>
<a-select placeholder="请选择分类" @change="catChange" default-value="data.catid">
<a-select-option v-for="item in cats" :key="item.catid">
{{ item.name }}
</a-select-option>
</a-select>
</div>
</template>
<script>
.......
methods: {
catChange(catid) {
this.data.catid = catid
},
}
</script>方法二：@change时，强制重新渲染 ，完美解决
<template>
<div>
<a-select placeholder="请选择分类" @change="forceUpdate" v-model="keepingInfo.catid">
<a-select-option v-for="item in cats" :key="item.catid">
{{ item.name }}
</a-select-option>
</a-select>
</div>
</template>
<script>
.......
methods: {
forceUpdate() {
this.$forceUpdate()
},
}
</script>