Accessing props in vue component data function
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
}
}
}
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;
}