Vue props undefined при переходе от родительского компонента к дочернему компоненту - PullRequest
Новая
       9

Vue props undefined при переходе от родительского компонента к дочернему компоненту

0 голосов
/ 22 апреля 2020

Возникла проблема с передачей двух элементов данных из метода данных моего родителя в реквизиты дочернего компонента. По сути, я устанавливаю значения данных внутри моего родительского компонента, связывая их с вызовом моего дочернего компонента внутри шаблона HTML. Затем я пытаюсь сослаться на эти переданные данные внутри дочерних «реквизитов».

Но я продолжаю получать это в моих Vue dev tools: 

 props
   date: undefined
   title: undefined

Вот мой код :

Приложение. vue (отображается только для справки. Не думаю, что моя проблема связана с этим кодом) 

<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 (родительский компонент) 

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

Заголовок. vue (дочерний компонент) 

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

1 Ответ

2 голосов
/ 22 апреля 2020

Если я правильно понимаю, в коде компонента вашего приложения вы должны использовать компонент <Home />, но вместо этого вы используете <Header />. Пример: 

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

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