CODEWITHSUNDEEP
vue.jsvue-componentreactive
Плетминцев Павел
Плетминцев Павел

Reputation: 15

Vue reactive component props

I have method in my component that adds popup and passing some props into its.

openPopup () {
    this.$store.dispatch('addPopup', {
      component: MapCropsPopup,
      props: {
        anchor: this.$refs.filter,
        selectedCropIds: this.selectedCropIds,
        activeSeason: this.activeSeason,
        onBeforeClose: () => {
          this.$router.push(this.getQuery({ showCrops: null }));
        },
        onSeasonChange: (season) => {
          this.activeSeason = season;
        }
      }
    });
  }

Here, in child component i store all passed props into 'props' variable

props: ['props']

and use them directrly in template

<div class="mcp-seasons__btn"
           :class="{ 'm--active': props.activeSeason === 'current' }"
           @click="setActiveSeason('current')">
        {{ i18n.CURRENT_LABEL }}</div>

To update current season in parent component I use method setActiveSeason

setActiveSeason (season) {
  this.props.onSeasonChange(season);
}

it works good, and updates 'activeSeason' in parent component, but won't update same property in child component.

What should I do to make property reactive again?

Upvotes: 1

Views: 5872

Answers (1)

Roy J
Roy J

Reputation: 43881

When you do

    selectedCropIds: this.selectedCropIds,
    activeSeason: this.activeSeason,

you are making nonreactive members of an object that are initialized to the given values at the time. If, instead, you did something like

    propParent: this

and in the popup component referred to props.propParent.activeSeason, you would be using the reactive item.

Upvotes: 1

Related Questions