时间戳

首页 > 解决方案 > 从文档示例中在 Vue 中声明反应性属性

vue.js - 从文档示例中在 Vue 中声明反应性属性

问题描述

我正在尝试使用 vue-cli 和从数组的 JSON 对象中按国家/地区获取 Covid-19 案例的路由器创建一个简单的。这是我的第一个 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 警告]：属性或方法“错误”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是反应性的

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

标签： vue.jsvue-router

解决方案

你所拥有的东西有点混乱。

在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 我希望您能找到它们有帮助。

推荐阅读