从文档示例中在 Vue 中声明反应性属性

Question

我正在尝试使用 vue-cli 和从数组的 JSON 对象中按国家/地区获取 Covid-19 案例的路由器创建一个简单的。这是我的第一个 Vue 应用程序。但是，我不断收到有关“声明反应性属性”的错误。我在许多不同的论坛上搜索了几十个类似的错误，似乎成功了。

大部分code is from 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 警告]：属性或方法“错误”未在 实例，但在渲染期间引用。确保该属性是 反应式，无论是在数据选项中，还是对于基于类的组件，通过 初始化属性

我可以看到警告 3 次，对于每个错误的道具，加载和信息，最重要的一个。

Answer 1

你所拥有的有点混乱。

在Api.js 中，您将没有太多模板的Vue 应用程序安装到ID 为app 的元素上。然后你导出一个类似 Vue 的对象，如果在另一个组件中导入它可以像 <about /> 一样使用。但是，我们不知道您是否在其他地方使用它。

在About.js 中，您似乎只有<template>，没有控制器或样式。您可能想将两者结合在一起，看起来与此类似（我不能在 SO 上使用 SFC，所以我只是将组件声明为内联，使用 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 中加载数据，你必须将所需的 props 传递给<About />，如下所示：

在App.js 模板中：

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

在About.jss 道具中：

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

这就是它的要点。但是，在你的情况下，这似乎是一个不必要的复杂化。

---

附带说明一下，为了加快实现您的最终目标，我冒昧地在您的代码中添加了一些功能：https://codesandbox.io/s/compassionate-dan-6z3zo
希望它们对您有所帮助。