如果 selectedLeague 已更改,我正在尝试重新分配组件
<label class="label">Select league</label> <div class="selector"> <v-select v-model="selectedLeague" :dropdown-should-open="dropdownShouldOpen" :options="leagues" label="displayLeague" placeholder="Select a league" /> </div> <div v-if="selectedLeague"> <LeagueTopScorers :is="selectedLeague" :selectedLeague="selectedLeague.id.toString()" /> </div>
在 LeagueTopScorers 组件中,我正在获取 API 以获取选定联赛中的最佳得分手。
我尝试过:watch、v-on:、created()
P粉3443557152023-12-28 15:00:30
确实当selectedLeague
更改时重新渲染1,但它不会重新安装。
仅当 selectedLeague
从 falsy 值更改为 truthy 值时才会挂载(因为此时 v-if< /code> 更改)。
您的问题存在一些问题:
v-select
是什么,
是什么,或者 :is
属性在
.根据您发布的代码片段,我猜测以下内容:
v-select
是 vue-select 或 Vuetify 选择组件:is
在
上的工作方式与在
上的工作方式相同。提示:不会,除非你自己编码,我对此表示怀疑
的 init 生命周期挂钩中(例如:onMounted
)在您将 selectedLeague
中存储的对象替换为另一个对象。如果我是正确的,实现此行为的最简单、最干净的方法是创建一个计算2:
const leagueId = computed(() => selectedLeague?.id.toString() || '')
...并在 v-if
、:key
和 :selectedLeague
中使用它:
<LeagueTopScorers v-if="leagueId" :selectedLeague="leagueId" :key="leagueId" />
(没有 每次 注释:leagueId
更改时,上面都会创建一个
的新实例,并且仅在 leagueId
不为 false 时渲染一个。我相信这就是您在技术上想要实现的目标3。
1 - 要验证,请使用 onUpdated(() => console.log('updated...'))代码>
2 - 如果selectedLeague
,则使用selectedLeague.value?.id.toString()
是一个 ref
3 - 同时,我确信无需创建
每次 leagueId
更改时,但如果没有更多详细信息和/或上下文,我无法提供更多帮助