如何在VueJs的axios`response`中访问`PromiseValue`

时间:2019-05-23 14:51:57

标签: laravel vue.js promise axios vue-component

我正在尝试在模式中显示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>

enter image description here

最后,我想以leftPanelVisiblity模态访问或显示数据,例如-<p>Name: {{ this.singleData.name }}</p><p>Name: {{ this.singleData.email }}</p>

2 个答案:

答案 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
    },