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?

this.messageId

Bert
– Bert

2017-03-10 15:52:54 +00:00
Commented Mar 10, 2017 at 15:52 — Bert
– Bert, Commented Mar 10, 2017 at 15:52
Also, your data function needs to return the data object.

Bert
– Bert

2017-03-10 15:53:42 +00:00
Commented Mar 10, 2017 at 15:53 — Bert
– Bert, Commented Mar 10, 2017 at 15:53

thanksd · Accepted Answer · 2017-03-10 15:58:08Z

98

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

edited Mar 10, 2017 at 15:58

answered Mar 10, 2017 at 15:52

thanksd

55.9k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shalini Over a year ago

data () { return { open: this.open, close: this.close } },

mufasa · Accepted Answer · 2021-02-18 17:39:49Z

73

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

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

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

edited Feb 18, 2021 at 17:39

answered Dec 3, 2018 at 14:30

mufasa

1,36414 silver badges20 bronze badges

5 Comments

Siva Tumma Over a year ago

Instead why not use data() {..}

Sean Rasmussen Over a year ago

I got burned by this once. It's a subtle difference but switching the function from arrow to data() {return {}} does the trick. Thanks mufasa.

Ryan Over a year ago

You can use an arrow function actually— the first argument will be a reference to the instance. data: vm => ({ somevar: vm.messageId })

jvndev Over a year ago

I know I'm late to the party but this answer solved an issue I just ran into. My understanding (albeit probably wrong now obviously) was that all three function declarations are the same, just difference in syntactic sugar. I'll research this but if someone want to drop a hint I won't complain.

mufasa Over a year ago

@jvndev Yes, the two bottom ones are the same and the top one is an arrow function which handles the context differently

Saurabh · Accepted Answer · 2017-03-10 15:52:14Z

16

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

answered Mar 10, 2017 at 15:52

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

7 Comments

Roy J Over a year ago

Or use a computed

Saurabh Over a year ago

@RoyJ Yes, that also can be done, but If you want to update the data variable, than you have to use computed with getter.

Roy J Over a year ago

I mean you should replace the data item with a computed, if somevar is never assigned by anything but the watcher.

Roy J Over a year ago

It makes the code clearer. A computed is effectively a watcher plus a data item.

Saurabh Over a year ago

I will completely agree with you on that.

|

Siwei · Accepted Answer · 2021-04-22 01:50:21Z

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.

Chinedu Ohagwu · Accepted Answer · 2018-09-27 08:12:05Z

0

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

answered Sep 27, 2018 at 8:12

Chinedu Ohagwu

173 bronze badges

3 Comments

Dragonthoughts Over a year ago

Please explain why your code is the correct answer.

Chinedu Ohagwu Over a year ago

because i tested it

MiKr13 Over a year ago

Return won't have the brackets () after it. As you have did return () { some_var: this.messaged }

Nazmus Shakib · Accepted Answer · 2020-01-14 05:06:30Z

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>

Collectives™ on Stack Overflow

Accessing props in vue component data function

6 Answers 6

1 Comment

5 Comments

7 Comments

Step1. use `this` to access the `props` variables.

Step2. watch the `props` variable

Step3. understand the process of rendering Child component

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

5 Comments

7 Comments

Step1. use this to access the props variables.

Step2. watch the props variable

Step3. understand the process of rendering Child component

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Step1. use `this` to access the `props` variables.

Step2. watch the `props` variable