No tengo casi ninguna experiencia con vue js.
Tengo 2 funciones loadComponentsOfUser() y loadUserId() , por lo que loadComponentsOfUser() usa el campo de ID de usuario, que debe ser cargado por la función loadUserId().
data() { return { userId: '' } }, created() { this.loadComponentsOfUser() }, methods(): { loadUserId() { axios.get('getUserId').then(res => { this.userId = res.data }).catch(() => { ... }) }); }, loadComponentsOfUser() { this.loadUserId() axios.get('users/' + this.userId).then(res => { }).catch(() => { ... }) }); }La función loadUserId() funciona correctamente y carga el valor correcto del servidor
Pero cuando se llama a loadComponentsOfUser(), parece que el campo this.userId no se ha inicializado y aparece un campo vacío en axios.
mi pregunta es ¿por qué el campo no se inicializó después de llamar a loadUserId()?
Debe esperar las respuestas, puede usar async y await :
new Vue({ el: '#demo', data() { return { id: 1, userId: '', user: null } }, created() { this.loadComponentsOfUser() }, methods: { async loadUserId() { await axios.get('https://jsonplaceholder.typicode.com/users/' + this.id) .then((res) => { this.userId = res.data.id }) .catch(() => {}) }, async loadComponentsOfUser() { await this.loadUserId() if(this.userId) { axios.get('https://jsonplaceholder.typicode.com/users/' + this.userId) .then(res => { this.user = res.data }) .catch(() => {}) } } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js" integrity="sha512-odNmoc1XJy5x1TMVMdC7EMs3IVdItLPlCeL5vSUPN2llYKMJ2eByTTAIiiuqLg+GdNr9hF6z81p27DArRFKT7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div id="demo"> <input type="number" v-model="id" /><button @click="loadComponentsOfUser">load</button> {{ user }} </div>