这篇博客探讨了在 Vue2 和 Vue3 中如何使用 v-if 和 v-show 实现 select 组件的联动效果。在 Vue2 中，v-if 可以正常工作，但在 Vue3 中，由于 v-if 的提前求值会导致未创建的对象引用错误。因此，作者建议将 v-if 改为 v-show 来避免这种问题，确保在城市选项渲染时，对应的 city 对象已经存在。
在vue2中通过v-if实现select联动
<div id="app">
省份：<select v-model="province_id">
<option :value="provice.id" v-for="provice in province_list">{{provice.name}}</option>
</select>
城市：<select v-model="city_id">
<option :value="city.id" v-for="city in city_list" v-if="city.pid==province_id">{{city.name}}</option>
</div>
但是在vue3中，v-if会先执行，此时city对象还没有创建，所以会报错。v-if改成v-show即可实现同样效果。
<div id="app">
省份：<select v-model="province_id">
<option :value="provice.id" v-for="provice in province_list">{{provice.name}}</option>
</select>
城市：<select v-model="city_id">
<option :value="city.id" v-for="city in city_list" v-show="city.pid==province_id">{{city.name}}</option>
</div>
扫一扫
6232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
