问题很简单，例如下面的选择组件，设置 defaultValue 的时候，其实值是通过访问API获取的动态数据从而取得的第一项，但是其实在获取到数据之前，组件已经 render 并且设置了默认值
<a-select
:defaultValue="ipData[0]"
@change="handleIpChange">
<a-select-option v-for="item in ipData" :key="item" :value="item">{{ item }}</a-select-option>
</a-select>
解决办法有两个
第一，获取到数据之前不渲染组件，其实也就是 if 判断，但是可能体验不是很好，并不想采用
第二，给 select 组件加一个 key，并且值是 defaultValue，如下
<a-select
:key="ipData[0]"
:defaultValue="ipData[0]"
@change="handleIpChange">
<a-select-option v-for="item in ipData" :key="item" :value="item">{{ item }}</a-select-option>
</a-select>
搞定！
网友评论