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
– killQuotes, Commented Apr 21, 2020 at 21:33
But I keep getting this inside my Vue dev tools: This happens without a working example? — Anurag Srivastava
– Anurag Srivastava, Commented Apr 21, 2020 at 21:33
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
– killQuotes, Commented Apr 21, 2020 at 21:39
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
– Anurag Srivastava, Commented Apr 21, 2020 at 21:41

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

2

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>

answered Apr 21, 2020 at 21:33

Mikhail Sidorov

1,43413 silver badges17 bronze badges

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

4 Comments

killQuotes Over a year ago

The Home component is inside the 'views' directory, and does not need to be registered inside App.vue. My Header component, however, needs to be displayed on every page, so included it inside App.vue and registered as a component.

Mikhail Sidorov Over a year ago

Ok, but you included your Header component inside Home. And you passed props from Home to Header, but your Home component not used anywhere. It will never showed.

killQuotes Over a year ago

I see what you mean now. So App.vue should be my Parent, not Home.vue. Is that accurate?

Mikhail Sidorov Over a year ago

Yes, it is correct. Please try to replace Header with Home in you App component, and you will see how it works.

Collectives™ on Stack Overflow

Vue props undefined when passing from parent component to child component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related