Dostęp rekwizyty w funkcji danych komponentu vue

Question

ja mijając rekwizyty do komponentu:

<template> 
    {{messageId}} 
    // other html code 
</template> 

<script> 
    export default { 
     props: ['messageId'], 
     data: function(){ 
     var theData={ 
      // below line gives ReferenceError messageId is not defined 
      somevar: messageId, 
      // other object attributes 
     } 
     } 
    } 
</script> 

W powyższym kodzie, mam skomentował wiersz, który daje błąd. Jeśli usuniemy tę linię, działa ona jak normalnie, a szablon renderuje się poprawnie (i widzę również oczekiwaną wartość {{messageId}}). Dlatego logika przekazywania danych jest poprawna. Wydaje się, że sposób dostępu do danych messageId w danych() jest nieprawidłowy. Jak uzyskać dostęp do rekwizytów messageId w danych?

Answer 1

Z metody data() można odwoływać się do właściwości komponentu za pomocą this.

Więc w twoim przypadku:

data: function() { 
    var theData = { 
    somevar: this.messageId, 
    // other object attributes 
    } 

    return theData; 
} 

Answer 2

Aby przypisać właściwość data równa rekwizytów, można użyć obserwatora, jak następuje:

<script> 
    export default { 
     props: ['messageId'], 
     data: function(){ 
     var theData={ 
      somevar: "", 
      // other object attributes 
     } 
     }, 
     watch: { 
     messageId: function(newVal) { 
      this.somevar = newVal 
     } 
     } 
    }