[Vue warn]: недопустимая проп: проверка типа не выполнена для проп. Ожидаемый объект, получил строку со значением "." - PullRequest
0 голосов
/ 12 апреля 2020

У меня есть два JSON запроса на Covid-19 API и два компонента диаграммы. Первый работает нормально, второй, потому что у него немного другая структура данных, это не так.

Вот рабочая песочница для первого компонента https://codesandbox.io/s/loving-tdd-t6m9z?file= / src / components / Request2. vue

[Vue warn]: Invalid prop: type check failed for prop "countrydata". Expected Object, got String with value "American Samoa".

При выборе страны в опции выбора для Request2, только передает String в Chart2. Пожалуйста, посмотрите на Vue Devtools ниже:

full object successfully passed to chart

Проблема в том, что Request2 должен передать Object со строкой страны: only country string is passed from selected option

Вот тот, который не работает:

Запрос. vue

<template>
  <div>
    <select v-model="country" class="option">
      <option :value="null">-- Select Country --</option>
      <option v-for="value in info" :key="value.code">
        {{ value.name }}
      </option>
    </select>
    <div v-if="country">
      <Chart2 :countrydata="country" />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Chart2 from "./WHOChart.vue";

export default {
  data() {
    return { info: null, loading: true, errored: false, country: [] };
  },
  name: "Request2",
  components: {
    Chart2
  },
  mounted() {
    axios
      .get("https://corona-api.com/countries")
      .then(response => {
        this.info = response.data.data;
        console.log("Request 2 type of response", typeof this.info);
        // console.log(this.info);
        return this.info;
      })
      .catch(error => {
        this.errored = true;
      })
      .finally(() => (this.loading = false));
  }
};
</script>

WHOChart. vue

<script>
import { Line } from "vue-chartjs";

export default {
  extends: Line,
  props: {
    countrydata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted() {
    this.renderChart(this.countrydata, this.options)
  }
};
</script>

Если бы кто-то мог помочь передать весь объект во второй файл, я был бы признателен. Оставайтесь в безопасности!

...