CODEWITHSUNDEEP
vuejs2vue-component
somecallmejosh
somecallmejosh

Reputation: 1425

VueJS Sibling Component Reload Challenges

I'm having a hard time figuring out how to get a component to reload after a sibling is updated. For instance, when I make a selection in the first component, I want the second component to "refresh" to account for the newly selected "state" data:

<c-select
  dataEndpoint="/states.json"
  errorMessage="Some error message..."
  id="state"
  message="Some message"
  v-model="form.state"
  :v="$v.form.state" />

Has the following dependency, so to speak:

<c-select 
  :dataEndpoint="`/${form.state}.json`"
  errorMessage="Some other error message..."
  id="county"
  message="This field uses a local data source and **is required**"
  v-model="form.county"
  :v="$v.form.county" />

Once a state is selected or changed, I need to "dynamically" reload the appropriate endpoint to show the counties for that state in a second component. Right now, the only way I can make this work is with a v-if="form.state hack. But, if a user attempts to change the state again, the changes do not take effect in the "county" component. I would appreciate any help or advice on how to best solve this issue.

Here is a link to my vue codebase in Code Sanbox

Upvotes: 0

Views: 79

Answers (1)

AndrewShmig
AndrewShmig

Reputation: 4923

Ok. Here is the result:

enter image description here

mounted is executed only ONCE, so after dataEndpoint has changed NO UPDATE action performed, that's why you should add watch to your c-list component and check if the entry has changed - update drop-down list:

watch: {
    dataEndpoint() {
      this.fetchAndSetJsonEndpoint();
    }
  },

Here is a working version of your code: https://codesandbox.io/s/64mj19r6zw

Upvotes: 1

Related Questions