मैंने अपने एपीआई डेटा को एक चुनिंदा सूची में लाने के लिए हर तरह की कोशिश की है। हालांकि, मैं असफल रहा हूं। सभी जानकारी सफलतापूर्वक आती है। लेकिन जब भी मैं उन्हें दिखाने की कोशिश करता हूं तो यह काम नहीं करता है। क्या मेरे कोड में कोई समस्या है?

मेरे मार्ग/web.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>

मैंने हर बार सफलतापूर्वक डेटा प्राप्त किया है। हालांकि, मैं चयन सूची को पॉप्युलेट करने में विफल रहा हूं।

enter image description here

enter image description here

मेरी 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>
1
Azmaeen 28 अप्रैल 2020, 02:40

1 उत्तर

सबसे बढ़िया उत्तर

आपको वास्तव में उस एपीआई के दस्तावेज़ीकरण से परामर्श लेना चाहिए जिसका आप उपयोग कर रहे हैं या कम से कम डेटा को वापस लौटने पर देखें।

एपीआई निम्नलिखित की तरह कुछ के साथ प्रतिक्रिया करता है

{
  "get": "countries",
  "parameters": [],
  "errors": [],
  "results": 217,
  "response": [
    "Afghanistan",
    "Albania",
    "Algeria",
    //...
  ]
}

तो आप अपने कोड में निम्न की तरह कुछ चाहते हैं

axios.get('https://covid-193.p.rapidapi.com/countries', options).then(res => {
  this.countryList = res.data.response
})

और आपके टेम्पलेट में

<select name="country">
  <option disabled value="">Choose</option>
  <option v-for="country in countryList" :key="country" :value="country">
    {{ country }}
  </option>
</select>

यदि आप Vue में चयन के साथ काम करना चाहते हैं, तो आप इसे v-model का उपयोग करके भी बांधना चाहेंगे, जैसे

<select v-model="selectedCountry" name="country">

और आपके data...

data: () => ({
  Recovered: "Loading ...",
  countryList: [],
  selectedCountry: ''
})

JsFiddle डेमो यहां ~ https://jsfiddle.net/caqx2zmr/

0
Phil 28 अप्रैल 2020, 10:26