Я пытался всеми способами извлечь свои данные API в список выбора. Однако я потерпел неудачу. Вся информация приходит успешно. Но всякий раз, когда я пытаюсь показать им, это не работает. Есть ли проблема в моем коде?
Мои маршруты / сеть. php файл
<?php
Route::get('/','StatusController@index');
Мой контроллер
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class StatusController extends Controller
{
//
public function index(){
return view('status-main');
}
}
Мой VueJS файл
<template>
<div class="container">
<h2>Total Recovered: {{Recovered}}</h2>
<select name="" id="" >
<option value="">Choose</option>
<option v-for="(list,index) in countryList" :key="list.id" :index="index">
{{list}}
</option>
</select>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:'CoronaStatus',
data: function () {
return {
Recovered: "Loading ...",
countryList:[],
// Country:''
}
},
// mounted(){
//
// this.globalStatus();
// },
methods:{
globalStatus:function () {
const options = {
headers: {"x-rapidapi-host": "covid-193.p.rapidapi.com",
"x-rapidapi-key": "ad21211fe4mshba485cda44108adp1712e0jsn54ed45914a9a"}
};
axios
.get("https://covid-193.p.rapidapi.com/countries", options)
.then(response=>response.json())
.then(response => {
// this.Recovered = response.data.Global.TotalRecovered;
this.countryList=response.data;
console.log(this.countryList);
// alert(this.countryList)
})
.catch(err => console.log(err));
}
},
mounted(){
this.globalStatus();
},
}
</script>
<style scoped>
</style>
Я каждый раз успешно извлекал данные. Однако мне не удалось заполнить список выбора.
My VueJS файл после обновления:
<template>
<div class="container">
<select name="country">
<option disabled value="">Choose</option>
<option v-for="country in countryList" :key="country" :value="country">
{{ country }}
</option>
</select>
</div>
</template>
<script>
import axios from 'axios'
export default {
data: () => ({
Recovered: "Loading ...",
countryList: []
}),
methods: {
globalStatus () {
const options = {
headers: {
"x-rapidapi-host": "covid-193.p.rapidapi.com",
"x-rapidapi-key": "ad21211fe4mshba485cda44108adp1712e0jsn54ed45914a9a"
}
}
axios.get('https://covid-193.p.rapidapi.com/countries', options).then(res => {
this.countryList = res.data.response
console.log(this.countryList);
})
}
},
mounted () {
this.globalStatus()
}
}
</script>
<style scoped>
</style>