我正在尝试在模式中显示client
信息的详细信息。单击@click="showDetails(props.row.id)"
后,我在方法中使用了axios.get
并返回了数据。现在,它以PromiseValue
对象的形式返回数据。如何访问PromiseValue
以显示html
中的值。有人可以帮我解决问题!我正在尝试如下-
<button @click="showDetails(props.row.id)"><i class="fas fa-eye"></i></button>
在脚本-
中<script type="text/javascript">
import axios from 'axios';
export default {
data(){
return{
leftPanelVisiblity: false,
singleData: '', }
},
methods:{
showDetails(id){
let b = axios.get('/api/clients/'+id)
.then(function (response) {
return response.data;
}).catch(error => {
alert(error);
});
//console.log(b);
this.singleData = b;
this.leftPanelVisiblity = true
},
}
}
</script>
最后,我想以leftPanelVisiblity
模态访问或显示数据,例如-<p>Name: {{ this.singleData.name }}</p>
或<p>Name: {{ this.singleData.email }}</p>
。
答案 0 :(得分:2)
在使用Promises时,不能将Axios调用分配给变量(除非您正在使用await / async)。
相反,您应该在then
回调中运行逻辑。否则,由于JavaScript具有同步特性,它将在请求完成之前运行。您的代码应如下所示:
methods:{
showDetails(id){
axios.get('/api/clients/'+row.id).then(response => {
//Logic goes here
this.singleData = response.data
this.leftPanelVisibility = true
}).catch(error => {
alert(error);
});
}
}
答案 1 :(得分:0)
您需要为axios的响应分配一个变量:
showDetails(id){
axios.get('/api/clients/'+id)
.then(function (response) {
this.singleData = response.data;
}).catch(error => {
alert(error);
});
console.log(this.sigleData);
this.leftPanelVisiblity = true
},