Объявление-Reactive-Properties в Vue из примера документации - PullRequest
Новая
       4

Объявление-Reactive-Properties в Vue из примера документации

1 голос
/ 29 марта 2020

Я пытаюсь создать простой с vue -cli и маршрутизатором, который выбирает дела Covid-19 по стране из JSON объекта массивов. Это мое первое приложение Vue. Тем не менее, я получаю сообщение об ошибке «Объявление реактивных свойств». Я искал десятки похожих ошибок на разных форумах и, похоже, добился цели.

Большая часть кода взята из vue .org , за исключением ссылки JSON.

Api. js: 

import axios from "axios";
import Vue from "vue";

new Vue({
  el: "#app",
  data() {
    return {
      info: null,
      loading: true,
      errored: false
    };
  },
  template: "<div>{{ output.info }}</div>",
  mounted() {
    axios
      .get("https://pomber.github.io/covid19/timeseries.json")
      .then(response => {
        this.info = response.data;
        console.log(this.info);
      })
      .catch(error => {
        console.log(error);
        this.errored = true;
      })
      .finally(() => (this.loading = false));
  }
});

export default {
  name: "About",
  props: {
    loading: String,
    errored: String,
    info: String
  }
};

О. js

<template>


<h1>Covid-19 cases by Country</h1>

<section v-if="errored">
  <p>
    We're sorry, we're not able to retrieve this information at the moment,
    please try back later
  </p>
</section>

<section v-else>
  <div v-if="loading">Loading...</div>

  <div v-else v-for="data in info" :key="data" class="currency">
    <h1>{{ data.Portugal[0].deaths }}</h1>
  </div>
</section>

Ошибка :

[Vue warn]: свойство или метод "с ошибкой" не определены в экземпляре, но на них ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализировав свойство

. Я вижу предупреждение 3 раза для каждого пропущенного объекта с ошибкой, загружая и информация, самая важная.

1 Ответ

2 голосов
/ 30 марта 2020

Есть немного путаницы в том, что у вас есть.

В Api.js вы монтируете приложение Vue без большого количества шаблона в элемент с идентификатором app. И затем вы экспортируете Vue -подобный объект, который, если импортирован в другой компонент, можно использовать как <about />. Однако мы не знаем, используете ли вы его где-либо еще.

В About.js у вас, похоже, есть только <template>, без контроллера или стиля. Возможно, вы хотели соединить их вместе, что выглядело бы примерно так (я не могу использовать SF C на SO, поэтому я просто объявил компонент встроенным, с Vue.component()): 

Vue.config.productionTip = false;
Vue.config.devtools = false;
Vue.component('About', {
  template: `<div>
    <h1>Covid-19 cases by Country</h1>
    <section v-if="errored">
      <p>
        We're sorry, we're not able to retrieve this information at the moment,
        please try back later
      </p>
    </section>

    <section v-else>
      <div v-if="loading">Loading...</div>

      <div v-else v-for="(data, name) in info" :key="name" class="currency">
        <h1>{{ name }}</h1>
        <div v-for="(entry, key) in data" :key="key">{{entry}}</div>
      </div>
    </section>
  </div>`,
  data: () => ({
    info: null,
    loading: true,
    errored: false
  }),
  mounted() {
    axios
      .get("https://pomber.github.io/covid19/timeseries.json")
      .then(response => {
        this.info = response.data;
        // console.log(this.info);
      })
      .catch(error => {
        // console.log(error);
        this.errored = true;
      })
      .finally(() => (this.loading = false));
  }
})

new Vue({
  el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

<div id="app">
  <About/>
</div>

Если вы хотите выполнить загрузку данных в parent, вы должны передать требуемые реквизиты в <About /> по следующим строкам:

В App.js шаблон: 

<About :loading="loading"
       :info="info"
       :errored="errored"
/>

В About.js с реквизитах: 

props: {
  loading: Boolean,
  info: Object,
  errored: Boolean
}

В этом суть. Но, в вашем случае, это может показаться ненужным осложнением.

В качестве дополнительного примечания, чтобы ускорить достижение вашей конечной цели, я позволил себе добавить еще несколько функций в ваш код: https://codesandbox.io/s/compassionate-dan-6z3zo
Надеюсь, вы найдете их полезными.

...