У меня есть два 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 ниже:
Проблема в том, что Request2 должен передать Object со строкой страны:
Вот тот, который не работает:
Запрос. 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>
Если бы кто-то мог помочь передать весь объект во второй файл, я был бы признателен. Оставайтесь в безопасности!