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?

Also, your data function needs to return the data object. – Bert Mar 10 '17 at 15:53 — Bert, Mar 10 '17 at 15:53

thanksd · Accepted Answer · 2017-03-10T15:58:08.770

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 '17 at 15:58

answered Mar 10 '17 at 15:52

thanksd

54,176
22
157
150

data () { return { open: this.open, close: this.close } }, – shalini Jan 21 '19 at 06:31

mufasa · Answer 2 · 2021-02-18T17:39:49.617

69

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 '21 at 17:39

answered Dec 03 '18 at 14:30

mufasa

1,271
13
18

5

Instead why not use `data() {..}` – Siva Tumma May 02 '19 at 09:16
2

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. – Sean Rasmussen Dec 31 '19 at 19:42
Thanks a lot, was looking for it. – Loïc Monard Jul 17 '20 at 13:19
Thank you. This was very helpful. – vbuser2004 Sep 14 '20 at 23:49
1

You can use an arrow function actually— the first argument will be a reference to the instance. `data: vm => ({ somevar: vm.messageId })` – Ryan Feb 18 '21 at 16:58
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. – jvndev Mar 13 '21 at 15:00
1

@jvndev Yes, the two bottom ones are the same and the top one is an arrow function which handles the context differently – mufasa Mar 15 '21 at 07:31

score 15 · Answer 3 · answered Mar 10 '17 at 15:52

15

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 '17 at 15:52

Saurabh

71,488
40
181
244

3

Or use a `computed` – Roy J Mar 10 '17 at 15:57
@RoyJ Yes, that also can be done, but If you want to update the data variable, than you have to use computed with getter. – Saurabh Mar 10 '17 at 16:02
I mean you should replace the data item with a computed, if `somevar` is never assigned by anything but the watcher. – Roy J Mar 10 '17 at 16:07
@RoyJ Why is that needed? – Saurabh Mar 10 '17 at 16:09
2

It makes the code clearer. A computed is effectively a watcher plus a data item. – Roy J Mar 10 '17 at 17:18
1

I will completely agree with you on [that](http://stackoverflow.com/a/41646264/1610034). – Saurabh Mar 11 '17 at 02:03
this will trigger an input event when you have an input v-model that data – Botea Florin Jul 19 '19 at 04:32
Thanks for this answer! – oj5th Mar 16 '20 at 06:06

score 3 · Answer 4 · answered Apr 22 '21 at 01:50

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.

score 0 · Answer 5 · answered Sep 27 '18 at 08:12

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 '18 at 08:12

Chinedu Ohagwu

17
3

1

Please explain why your code is the correct answer. – Dragonthoughts Sep 27 '18 at 08:31
because i tested it – Chinedu Ohagwu May 20 '19 at 17:44
Return won't have the brackets () after it. As you have did `return () { some_var: this.messaged }` – MiKr13 Feb 10 '20 at 15:55

score 0 · Answer 6 · answered Jan 14 '20 at 05:06

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>

Accessing props in vue component data function

6 Answers6

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

Step2. watch the `props` variable

Step3. understand the process of rendering Child component

Linked

Accessing props in vue component data function

6 Answers6

Step1. use this to access the props variables.

Step2. watch the props variable

Step3. understand the process of rendering Child component

Linked

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

Step2. watch the `props` variable