Реквизит и шаблоны - PullRequest
Новая
       3

Реквизит и шаблоны

0 голосов
/ 21 июня 2019

Я просто создаю свой первый пользовательский компонент, и я действительно борюсь с основами. Мой компонент: 

<template>
<StackLayout>
  <Label :text="title" />
  <Label :text="slate.description" />
</StackLayout>
</template>

<script>
var slate;
export default {
name: "SlateComponent",

props:
  ['slate', 'title'],

data() {
  return {
    slate: slate,    
  };
},    
}
</script>

Этот компонент должен регулярно обновляться и занимать значительную часть домашней страницы приложения: 

<template>
<Page class="Page" actionBarHidden="true" backgroundSpanUnderStatusBar="true" >
<StackLayout>
    <StackLayout row="0">
      ...
    </StackLayout>
    <StackLayout row="1">
          <SlateComponent :title="title" :slate="slate" />
    </StackLayout>
...
</Page>
</template>

<script>
...

    import SlateComponent from "./SlateComponent";

    var slateTitle;
    var title;
    var gameSlates;
    var currentSlate;
    var slate;

    data() {
            return {
                events: events,
                title: title,
                slate: slate,
            };
        },


    async created() {
            this.gameSlates = await getGameSlates();
            this.currentSlate = this.gameSlates[2];
            this.title = this.currentSlate.description;
            console.info("The title is: " + this.title);
            this.slate = this.currentSlate;
    }
    };

Результат: Независимо от того, что я делаю, ни один объект не передается компоненту.

Если я закомментирую приложение компилируется и работает нормально, регистрирует currentSlate или его свойство, description и отображает компонент, включая title.

Но когда я включаю эту строку, она взрывается с ошибкой: slate не определено.

(я знаю, что 

props:
      ['slate', 'title'],

неправильно в соответствии с руководством по стилю. Но я не смог заставить работать предпочтительный формат.)

Что мне здесь не хватает?

1 Ответ

1 голос
/ 22 июня 2019

При доступе к реквизитам в любом месте за пределами шаблона, this требуется 

 data() {
      return {
        slate: slate,    
      };
    }

Должно быть 

data() {
  return {
    slate: this.slate   
  };
},
...