Как получить доступ к `PromiseValue` в axios` response` в VueJs

Question

Я пытаюсь показать 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>.

Answer 1

Вы не можете назначить вызов Axios переменной при использовании Promises (если только вы не используете 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);
    });
  }
}

Answer 2

Вам нужно присвоить переменной ответ вашей оси:

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