我的控制台中没有显示数据.请登录vue

Question

在我的vue应用程序中，我有两个方法，一个方法从我的laravel后端获取一些数据，第二个方法需要能够获取数据，以便我可以在该方法中使用它。我正在努力解决的问题是，第二种方法不是获取数据。

这是我的代码

<template>
<app-layout>
<div class="content-wrapper" style="margin-left: 0;">
<div class="content">
<div class="container">
<div class="row pt-5">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-12">
Some data will show here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</app-layout>
</template>
<script>
import AppLayout from '@/Layouts/AppLayout'
export default {
components: {
AppLayout,
},
data() {
return {
testData: ''
}
},
methods: {
firstMethod() {
axios.get('/api/get-data').then(response => {
this.testData = response.data;
});
},
secondMethod(){
console.log(this.testData);
}
},
mounted() {
this.firstMethod();
this.secondMethod();
}
}
</script>

Answer 1

您在mount函数中运行这两个函数，因此两个函数同时运行，并且secondMethod()当时执行第一个this.testData，因此您可以使用async和await等待完成firstMethod()，然后运行secondMethod()

这将像下面的代码

<template>
<app-layout>
<div class="content-wrapper" style="margin-left: 0">
<div class="content">
<div class="container">
<div class="row pt-5">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-12">
Some data will show here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</app-layout>
</template>
<script>
import AppLayout from "@/Layouts/AppLayout";
export default {
components: {
AppLayout,
},
data() {
return {
testData: "",
};
},
methods: {
async firstMethod() {
const { data } = await axios.get("/api/get-data");
this.testData = data;
},
secondMethod() {
console.log(this.testData);
},
},
async mounted() {
await this.firstMethod();
this.secondMethod();
},
};
</script>

Answer 2

您可以尝试在created((钩子中调用firstMethod，而不是挂载。在我看来，您不需要修改传入数据的方法。改用手表：

watch: {
// whenever question changes, this function will run
testData: function (newValue) {
// do what transformation you need here
}
}

监视钩子在变量值发生变化时运行，所以它应该在赋值时运行。

Answer 3

你看不到控制台日志的问题是，即使你先执行第一个方法，它实际上也是在第二个方法之后执行的，因为需要更多的时间来解决。

请尝试下面的方法，在then之后添加的第一个方法中执行第二个方法，这意味着第一个方法将被解析，因此我们将得到api响应。

如果您继续从控制台日志中看不到任何内容，那么api端点就会出现问题。

mounted() {
this.firstMethod();
},
methods: {
firstMethod() {
axios.get('/api/get-data').then(response => {

this.testData = response.data;
this.secondMethod();
});
},
secondMethod(){
console.log(this.testData);
}
},