Accessing props in vue component data function

Question

I am passing a props to a component:

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

In above code, I have commented the line that gives the error. If I remove that line, it works as normal and template renders properly (and I can see the expected value of {{messageId}} as well). Hence the logic to pass data is correct.

It seems that the way to access the messageId in data() is wrong. So how do I access the props messageId in data?

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 5

I think you have done your solution since the question posted a couple of month earlier. I faced the same problem yesterday, so tried out above solutions without no luck. However, I would like to share an alternative solution for this case that helps someone considerably. watch has some attributes to handle those type of cases. Below scrips shows that how do we accept the props value is data.

<script>
   export default {
      props: {
            messageId: {
                type: String,
                required: true
            }
        }
      data: function(){
         var theData= {
            somevar: "",
            // other object attributes
         }

         return theData;
      },
      watch: {
        messageId: {
                // Run as soon as the component loads
                immediate: true,
                handler() {
                    // Set the 'somevar' value as props
                    this.somevar = this.messageId;
                }
            }
      }
   }
</script>

Answer 6

as @Saurabh described, I want to add more details.

If you are rendering a Child component, and want to set the data variables by props, you have to use both this and watch functions:

Step1. use this to access the props variables.

<script>
export default {

    data () {
      id: 0
    },
    
  
    props: ['propId'],
    methods: {
      init() { 
        this.id = this.propId  // step1. assign propId to id
      }
    }
}
</script>

Step2. watch the props variable

<script>
export default {

    data () {
      id: 0
    },
    props: ['propId'],
    methods: {
      init() { 
        this.id = this.propId  // step1. assign propId to id
      }
    },
    // add this to your code , this is a MUST. 
    // otherwise you won't SEE your data variable assigned by property
    watch { 
      propId: function(new_value) { 
        this.init()
      }
    }
}
</script>

Step3. understand the process of rendering Child component

Assuming you have two component: Parent and Child ( Child has a property naming as propId ) , and Child also have a "async" operation such as reading database.

// Parent's View

<Child propId='parent_var_id'></Child>

3.1 Parent got rendered

3.2 Child got rendered , in this case, parent_var_id blank

3.3 10ms later, parent_var_id changed to 100

3.4 Child property propId also changed as binding.

3.5 Child 's watch function called, and the variable id defined in data changed.