Vue props undefined when passing from parent component to child component

Question

Having an issue passing two data members from my parent's data method to the child component's props. Basically, I'm setting the data values inside my parent component, binding them to my child component invocation inside the HTML template. Then I'm attempting to reference this passed data inside the child'd 'props'.

But I keep getting this inside my Vue dev tools:

 props
   date: undefined
   title: undefined

Here's my code:

App.vue (showing for reference only. i don't expect my issue is with this code)

<template>
  <div id="app">
    <div id="nav">
      <Header />
    </div>
  </div>
</template>

<script>
  import Header from '@/components/Header.vue'

  export default {
    components: {
      Header
    }
  }
</script>

Home.vue (Parent component)

<template>
  <div>
    <Header :title="title" :date="date" />
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "@/components/Header.vue";
import moment from "moment";

export default {
  data () {
    return {
      title: "SOME NEWS",
      date: moment().format("dddd, MMMM D, YYYY") 
    }
  },
  components: {
    Header
  }
};
</script>

Header.vue (Child component)

<template>
  <div class="hello">
    <h1>{{ getTitle() }}</h1>
    <h3>{{ getDate() }}</h3>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        required: true
      },
      date: {
        type: String,
        required: true
      }
    },
    method: {
      getTitle() {
        return this.title
      },
      getDate() {
        return this.date
      }
    }
  };
</script>

If I had a working example, I would not have posted this question. — killQuotes
But I keep getting this inside my Vue dev tools: This happens without a working example? — Anurag Srivastava
The code I provided is what I have, and it's not working and the Vue dev tools (for Chrome) shows that the two properties, title and date, are undefined. — killQuotes
Do you understand the meaning of a working example? It is the code which shows your error, working in an environment, like a code snippet/code sandbox. — Anurag Srivastava

Mikhail Sidorov Mikhail Sidorov · Accepted Answer · 2020-04-21T21:33:08

If I understand you correct in your App component code you should use <Home /> component, but you use <Header /> instead. Example:

<template>
  <div id="app">
    <div id="nav">
      <Home />
    </div>
  </div>
</template>

<script>
  import Home from '@/components/Home.vue'
  export default {
    components: {
      Home
    }
  }
</script>

Vue props undefined when passing from parent component to child component

1 Answers