CODEWITHSUNDEEP
vuejs2vue-componentvue.js
Kendall
Kendall

Reputation: 5255

child component property not being updated when mounted()

I have the following markup in a parent component

....
<div class="container-fluid">
          <claims :userID="userId"></claims>
          <claimForm :claimID="claimId" v-if="isDistributor"></claimForm>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="row">
          <display :claimID="claimId"></display>

 ...........
 data(){ return { claimId: null } },
 beforeMount(){
        this.userId = this.isDistributor? this.currentUser.id: null

        this.eventEmitter.$on('claim.details', function(id) {
          this.claimId = id
        })
      }

Then in the child component known as <display>

, watch: {
      .....
      claimID: function(n) {
        console.log('claim');
        if(n == null) return false

        this.getClaimById()
      }
    .....

when an event bus this.eventEmitter.$emit() is emitted the parent component data claimdId is updated however the child component's claimID property doesn't seem to be updated thus the "watch" is not triggered.

What would cause the property to not be updated?

Upvotes: 0

Views: 61

Answers (1)

Saurabh
Saurabh

Reputation: 73649

As explained here:

HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:

so your code should be:

<claimForm :claim-iD="claimId" v-if="isDistributor"></claimForm>

Upvotes: 1

Related Questions