Accessing props in vue component data function

From the data() method, you can reference the component's properties using this.

So in your case:

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

EDIT: According to Ryans posts it is possible to reference the instance with an arrow function like this:

data: (instance) => ({  somevar: instance.messageId }),

PREVIOUS POST:

Note that this does not work if you are using an arrow function for assigning your data:

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

Because this will not point to the component. Instead, use a plain function:

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

or using ES6 object method shorthand as Siva Tumma suggested:

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

To assign a data property equal to a props, you can use watcher, as following:

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