CODEWITHSUNDEEP
vue.jsvuejs2
martinval
martinval

Reputation: 532

VueJS Passing computed data as a prop returns undefined

I've tried and tried, but i can't figure it out the problem. From what I could read elsewhere, the variable passed to the child component gets sent as undefined before the data is available in the parent.

Please see here for reference:

the code in codesandbox 

<template>
  <div id="app">
    <child :parentData="data.message"/>
  </div>
</template>

<script>
import Child from "./components/Child";

export default {
  name: "App",
  components: {
    Child
  },
  computed: {
    quote() { return 'Better late than never' }
  },
  data() {
    return {

      data: { message: this.quote } ,

    thisWorks: { message: "You can see this message if you replace what is passed to the child"  }

    };
  }

};
</script>

Then in the child:

<template>
  <div>
  <h1>I am the Child Component</h1>
  <h2> {{ parentData }}</h2>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {            
      parentData: { type: String, default: "I don't have parent data" },   
  },
};
</script>

Upvotes: 5

Views: 11908

Answers (1)

Tu Nguyen
Tu Nguyen

Reputation: 10189

The answer is, you cannot access the value of this.quote because at the moment the data objectis creating, the computed object actually does not exist.

This is an alternative, we will use the created() lifecycle hook to update the value of data object:

  created(){
    this.data = {
      message: this.quote
    }
  },

You don't need to change any things, just adding those line of codes is enough.

I've already tested those codes in your CodeSandbox project and it works like a charm.

Hopefully it helps!

Upvotes: 4

Related Questions