Vue реквизиты не определены в компоненте - PullRequest
Новая
       22

Vue реквизиты не определены в компоненте

0 голосов
/ 29 февраля 2020

Я с трудом передаю реквизиты моему дочернему компоненту и читаю множество примеров, в моем положении есть несколько. Кажется, это не должно быть так сложно, верно? В идеале, когда я помещаю свой компонент на страницу html, я хочу иметь возможность передавать URL-адрес в качестве атрибута. Пример <landingpage myUrl="http://localhost"><landingpage>, но когда я проверяю с помощью Vue Dev Tools в браузере, он всегда не определен. Я видел взлом, используя JQuery, чтобы выбрать элемент и затем получить атрибут, но я хотел бы сделать это в чистом Vue. В моем коде, приведенном ниже, в мой компонент не передается изменение «title».

В моем индексе. html страница У меня есть 

     <body>
    <p>Hello world, this is some text. Howdy.</p>
    <div id="NewWidget">
      <div id="app" data-title="mario" :data-title="luigi" :title="princess">
        <landingpage title="hello!" :title="spaghetti" v-bind:title="Nervos"></landingpage>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>

В моем приложении. vue У меня есть 

<template>
    <div id="app">
      <router-view></router-view>
    </div>
</template>

И на моей целевой странице. vue У меня есть 

export default {
  name: 'landingpage',
  data () {
    return {
      categories: [],
    }
  },
  props: {
    title: {
      type: String
    }
  },
...

Мой индекс маршрутизатора. js

export default new Router({
  routes: [
    {
      path: '/',
      name: 'LandingPage',
      component: LandingPage,
      props: true
    },
...

На моей LandingPage компонент this.title всегда имеет значение null / undefined. Я использую Vue 2.5.2 / Vue Router 3.0.1 Единственное, о чем я могу думать, это мое использование VueRouter в приложении. vue сжигает реквизит?

...