Vue.js 从文档示例中声明Vue中的被动属性

我正在尝试使用vue cli和路由器创建一个简单的应用程序，它可以从数组的JSON对象中按国家提取新冠病毒-19病例。这是我的第一个Vue应用程序。然而，我不断收到一个关于“声明反应性属性”的错误。我在许多不同的论坛上搜索了几十个类似的错误，似乎做到了这一点

除了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
  }
};

从“axios”导入axios；
从“Vue”导入Vue；
新Vue({
el:“应用程序”，
数据（）{
返回{
信息：空，
加载：对，
错误：错误
};
},
模板：“{output.info}}”，
安装的（）{
axios
.get（“https://pomber.github.io/covid19/timeseries.json")
。然后（响应=>{
this.info=response.data；
console.log（this.info）；
})
.catch（错误=>{
console.log（错误）；
this.errored=true；
})
.最后（（）=>（this.loading=false））；
}
});
导出默认值{
姓名：“关于”，
道具：{
加载：字符串，
错误：字符串，
信息：字符串
}
};

关于.js

<template>

各国的新冠病毒-19病例

很抱歉，我们目前无法检索此信息，
请稍后再试

加载。。。
{{数据.葡萄牙[0].死亡人数}

错误：

[Vue warn]：未在上定义属性或方法“errored” 实例，但在渲染期间被引用。请确保此属性为 反应式，无论是在数据选项中，还是对于基于类的组件 初始化属性

---

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

你有一点困惑

在

Api.js

中，您正在将一个没有太多模板的Vue应用安装到id为

app

的元素上。然后导出一个类似Vue的对象，如果导入到另一个组件中，该对象可以像

一样使用。但是，我们不知道您是否在其他地方使用它

在

About.js

中，您似乎只有一个

，没有控制器或样式。您可能希望将这两个组件结合在一起，看起来与此类似（我不能在SO上使用SFC，所以我只是使用

Vue.component（）

）内联声明组件：

Vue.config.productionTip=false；
Vue.config.devtools=false；
Vue.component（'About'{
模板：`
按国家分列的新冠病毒-19病例

很抱歉，我们目前无法检索此信息，
请稍后再试

加载。。。
{{name}}
{{entry}}
`,
数据：（）=>({
信息：空，
加载：对，
错误：错误
}),
安装的（）{
axios
.get（“https://pomber.github.io/covid19/timeseries.json")
。然后（响应=>{
this.info=response.data；
//console.log（this.info）；
})
.catch（错误=>{
//console.log（错误）；
this.errored=true；
})
.最后（（）=>（this.loading=false））；
}
})
新Vue({
el:“#应用程序”
})

errored是字符串还是布尔值？@ChristianCarrillo应该是布尔值，我改了，但还是同一个错误。哇！机器！这就是我所想象的。干得好。谢谢

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