CODEWITHSUNDEEP
javascriptvuejs2vue-component
Daniel Cull
Daniel Cull

Reputation: 303

Vue.js components data not updating when props are updated

I'm too confused by this because I have another simple component that is working and is following the same style as the one in error.

I have a component alertBox :

var alertBox = {
template: '\
    <transition name="fade">\
      <div class="alert" :class="[status]">\
        {{ message }}\
        <button @click="close" type="button" class="close" aria-label="Close">\
          <span aria-hidden="true">&times;</span>\
        </button>\
      </div>\
    </transition>',
    props: {
      alertMessage: {
        type: String,
        required: true
      },
      alertStatus: {
        type: String,
        required: true
      }
    },
    data: function() {
      return {
        status: this.alertStatus,
        message: this.alertMessage
      };
    },
    methods: {
      close: function() {
        console.log('ran close')
        this.$emit('close-alert');
        this.crazyTest();
      },
      crazyTest: function() {
        console.log(this.alertStatus)
        console.log(this.alertMessage)
        console.log(this._props)
        console.log(this.$props)
        console.log(this._data)
        console.log(this.message)
        console.log(this.status)
      }
    }
}

Haha couldn't be bothered removing crazyTest method!

The alertBox is used in two areas, once on the parent and once on a component within the parent.

On the parent it has data binding as such: :alert-message="alerts.createEngineerMessage" :alert-status="alerts.createEngineerStatus"

And on the components template is as such: :alertMessage="alerts.createCompanyMessage" :alertStatus="alerts.createCompanyStatus"

And in another method after a user action the data within the alerts object on the parent is updated before the alertBox is shown. My crazyTest method confirms this and shows that the props are updated with the new data in the component. However the data properties message and status do not get updated.

All values are initialised for reactivity.

Upvotes: 0

Views: 5463

Answers (1)

Thomas
Thomas

Reputation: 2536

When the component gets rendered your data is set. That's why nothing updates.

To solve this problem you could go two ways:

1) watch for changes in your props and update your data.

watch: {
    alertMessage: function (val) {
      this.data.message = val
    },
}

2) just use your props directly without copy to data.

<transition name="fade">\
      <div class="alert" :class="[errorStatus]">\
        {{ errorMessage }}\
        <button @click="close" type="button" class="close" aria-label="Close">\
          <span aria-hidden="true">&times;</span>\
        </button>\
      </div>\
    </transition>'

Upvotes: 2

Related Questions