1

I am trying to realod component if selectedLeague has been changed

<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>

In LeagueTopScorers component I am fetching API to get top scorers from selected league.

I tried :watch, v-on:, created()

2
  • Are you trying to fetch and display new data after selection? Because a true component reload will not keep the selection, it will revert to the default before the selection. Also, your use of :is is not correct syntax. Commented Nov 11, 2022 at 22:59
  • I am trying to pass a new variable prop to my component which should fetch data and display it in my parent component Commented Nov 11, 2022 at 23:29

1 Answer 1

1

<LeagueTopScorers /> does re-render when selectedLeague changes 1, but it doesn't re-mount. It only mounts when selectedLeague changes from a falsy value to a truthy one (because that's when the value of the v-if changes).

There are a few problems with your question:

  • you're asking about a technical aspect (let's call it X), which you think will solve a business requirement (let's call it Y). It's a classical XY problem. Why don't you describe the Y requirement? (e.g: what you want to achieve). What output change do you want to see on what input change?
  • the code you posted is not enough to create a runnable example. We don't know what v-select is, what <LeagueTopScorers /> is, or how does :is prop look like on <LeagueTopScorers />.

From the snippet you posted, I am guessing the following:

  • v-select is either vue-select or Vuetify select component
  • you expect :is to work on <LeagueTopScorers /> as it does on <component />. Hint: it doesn't, unless you coded it yourself, which I doubt
  • last, but not least, I guess you want some code you placed into an init lifecycle hook of <LeagueTopScorers /> (e.g: onMounted) to run when you replace an object stored in selectedLeague with another object.

If I'm correct, the simplest and cleanest way to achieve this behavior is to create a computed 2:

const leagueId = computed(() => selectedLeague?.id.toString() || '')

... and use it in v-if, :key and :selectedLeague:

<LeagueTopScorers
  v-if="leagueId"
  :selectedLeague="leagueId"
  :key="leagueId" />

(without the <div v-if> wrapper).

The above will create a new instance of <LeagueTopScorers /> every time leagueId changes and will only render one when leagueId is not falsy. I believe that's what you were trying to accomplish, technically 3.


Notes:
1 - to verify, use onUpdated(() => console.log('updated...'))
2 - use selectedLeague.value?.id.toString() if selectedLeague is a ref
3 - at the same time, I am sure the actual business requirement can be met without creating a new instance of <LeagueTopScorers /> every time leagueId changes, but I can't help more without more details and/or context

Sign up to request clarification or add additional context in comments.

4 Comments

Vue select. dropdown-should-open is not a prop on Vuetify. Could be an error in passing props from parent to child as well, based on author comment.
Thanks a lot, good answer. It resovled my problem.
Glad it helped you. Consider marking it as accepted if it helped you solve the problem. If you consider it's not sufficiently relevant for your actual problem, consider adding your own, where you explain more clearly the problem was and how you fixed it, and marking that one as accepted. Ideally, your question (and the accepted answer) should help other users find a solution to a similar issue with ease.
Can you look at my bigger problem? It is similar to this but in different case. stackoverflow.com/questions/74468482/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.