ऐप.व्यू

<template>
  <v-app>
    <v-main>
      <Header :token="token" :users="users"/>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import Header from './components/layout/Header'
import axios from 'axios';

export default {
  name: 'App',
  components: {
    Header
  },
  data() { 
    return { token: null, users: [] };
  },
  created(){
    this.token = this.getToken();
    this.users = this.getUsers();
  },
  methods:{
    getToken(){
      axios.get("http://someURL.com")
        .then(res => {
          console.log("token = ", res)
          return res;
        });
    },
    getUsers(){
      axios.get("http://someURL.com")
        .then(res => {
          let users = res.data.map(({username}) => username);
            console.log("users = ", users)
            return users;
        });
    }
  }
};
</script>

हैडर.व्यू

<template>
    <header class="header">
        <v-toolbar dark>
            <h1>TITLE</h1>
            
            <v-spacer></v-spacer>

            <div>
                <router-link to="/">Home</router-link> |
                <router-link to="/about">About</router-link>
            </div>
        </v-toolbar>

        <p v-if="users">{{users}}</p>
        <p v-else>No Data</p>

    </header>
</template>

<script>
export default {
    name:"Header",
    props: ['token', 'users'],
    data: () => ({
    }),
    mounted(){
        this.onStart();
    },
    methods:{
        onStart(){
            console.log("insideHeader = ", this.users)
        }
    }
}
</script>

<style scoped>
    #nav{
        float: right;
    }
    .header a{
        color: #fff;
        padding-right: 5px;
        text-decoration: none;
    }
</style>

तो मूल रूप से मेरी समस्या क्या है, मैं axios का उपयोग करके App.vue पर कुछ डेटा ला रहा हूं, फिर उस डेटा को Header.vue पर बाध्य कर रहा हूं, इसलिए जब ऐप पहले लोड होता है तो बाध्य मूल्य अपरिभाषित होगा, केवल कुछ समय बाद डेटा प्राप्त किया जाता है एपीआई। लेकिन फिर भी हैडर में मान अपरिभाषित रहता है। कोई उपाय?

0
Thamjith Thaha 17 पद 2020, 15:58

2 जवाब

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

वादा कॉलबैक से एक मूल्य वापस करने का प्रयास न करें, आप प्रतिक्रिया वापस करने के लिए async/प्रतीक्षा का उपयोग कर सकते हैं:

<template>
  <v-app>
    <v-main>
      <Header :token="token" :users="users"/>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import Header from './components/layout/Header'
import axios from 'axios';

export default {
  name: 'App',
  components: {
    Header
  },
  data() { 
    return { token: null, users: [] };
  },
  created(){
    this.token = this.getToken();
    this.users = this.getUsers();
  },
  methods:{
    async getToken(){
     let res=await axios.get("http://someURL.com")
       
          console.log("token = ", res)
          return res.data;
      
    },
   async getUsers(){
     let res=await axios.get("http://someURL.com")
       
          let users = res.data.map(({username}) => username);
            console.log("users = ", users)
            return users;
       
    }
  }
};
</script>
0
Boussadjra Brahim 17 पद 2020, 16:03

एपी कॉल प्रकृति में एसिंक हैं। इसलिए async/प्रतीक्षा का उपयोग करें ..

<template>
  <v-app>
    <v-main>
      <Header :token="token" :users="users"/>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import Header from './components/layout/Header'
import axios from 'axios';

export default {
  name: 'App',
  components: {
    Header
  },
  data() { 
    return { token: null, users: [] };
  },
  async created(){
    this.token = await this.getToken();
    this.users = await this.getUsers();
  },
  methods:{
    getToken(){
      return axios.get("http://someURL.com")
        .then(res => {
          console.log("token = ", res)
          return res.data;
        });
    },
    getUsers(){
      return axios.get("http://someURL.com")
        .then(res => {
          let users = res.data.map(({username}) => username);
            console.log("users = ", users)
            return users;
        });
    }
  }
};
</script>
1
Nilesh Patel 17 पद 2020, 16:08