Доступ к реквизитам в функции данных компонента vue

Я передаю реквизиты для компонента:

<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>

В приведенном выше коде я прокомментировал строку, которая дает ошибку. Если я удалю эту строку, она будет работать нормально, а шаблон правильно отобразится (и я также увижу ожидаемое значение {{messageId}}). Следовательно, логика передачи данных верна.

Кажется, что путь доступа к messageId в data() неверен. Итак, как мне получить доступ к реквизитам messageId в данных?

Ответ 1

Из метода data() вы можете ссылаться на свойства компонента с помощью this.

Итак, в вашем случае:

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

  return theData;
}

Ответ 2

Обратите внимание, что это не работает, если вы используете функцию стрелки для назначения ваших данных:

data: () => ({
  somevar: this.messageId // undefined
}),

Потому что this не будет указывать на компонент. Вместо этого используйте простую функцию:

data: function() {
  return { somevar: this.messageId }
},

или используя сокращенный метод объекта ES6, как предложил Шива Тумма:

data() {
    return { somevar: this.messageId }
}

Ответ 3

Чтобы назначить свойство данных, равное реквизитам, вы можете использовать наблюдатель, как показано ниже:

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

Ответ 4

<template>
   {{messaged}}
   // other HTML code
</template>

<script>
   export default {
      props: ['messaged'],
      data: function(){
         return () {
           some_var: this.messaged
         }
      },
      methods: {
      post_order: function () {
        console.log({
          some_var: this.some_var.id
        })
      }
    }

   }
</script>