Kind Komponenteneigenschaft nicht aktualisiert wird, wenn montiert()

Question

Ich habe das folgende Markup in einer übergeordneten Komponente

.... 
<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 
     }) 
     } 

Dann in der Kind-Komponente als <display> bekannt

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

     this.getClaimById() 
     } 
    ..... 

, wenn ein Ereignis Bus this.eventEmitter.$emit() ist emittiert die Elternkomponente Daten claimdId wird aktualisiert, aber die claimID Eigenschaft der untergeordneten Komponente scheint nicht aktualisiert zu werden, damit die "Uhr" nicht ausgelöst wird.

Was würde dazu führen, dass die Eigenschaft nicht aktualisiert wird?

Answer 1

Wie erläutert here:

HTML Attribute Groß- und Kleinschreibung, so dass, wenn nicht-String-Vorlagen, camelcased Namen ihrer Kebab-Fall verwenden müssen prop (Bindestrich getrennt) Äquivalente:

so soll Ihr Code sein:

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