Vue. js переменная не определена после передачи в другой компонент

Question

У меня есть переменная commentRecId в компоненте A , которую я хочу передать, чтобы использовать ее в компоненте B .

Я включил это в шаблон компонента A :

<EditComment v-bind:comment-rec-id="commentRecId" v-if="showEdit"></EditComment>

Я устанавливаю showEdit в значение true в методах компонента A :

methods: {
  loadComments: function() {
    this.showEdit = true;
    console.log("this.ShowEdit in ShowComment: " + this.showEdit);
    console.log("commentRecID in ShowComment: " + this.commentRecId);

До теперь это прекрасно работает, и commentRecID имеет значение.

Проблема в том, что переменная commentRecId отображается как неопределенная в другом компоненте B и после нескольких часов пробной версии и ошибка, я до сих пор не понимаю, почему.

В компоненте B , у меня это в подпорках:

export default {
    props: ["commentRecId"],

и использовал это для ссылки на переменную:

var statID = this.commentRecId;
console.log("Edit Comment this.commentRecId: " + statID);

Может кто-нибудь сказать мне, что я делаю не так?

( Компонент A ) ( Компонент B )

Answer 1

Попробуйте установить statID как вычисляемое свойство, используйте его в смонтированном хуке:

computed :{
  statID (){
   return this.commentRecId;
  }

}

и укажите его в смонтированном хуке, добавив префикс this, как console.log("Edit Comment this.commentRecId: " + this.statID);