Как вытащить значение из запроса Axios?

Question

Всем привет.
Есть такой код:
(Обратить внимание на HTML класс 'symbolTicket"')

<template>
<div class="chart">
&lt;span class="symbolTicket"&gt;
  {{getTicket()}}
&lt;/span&gt;

&lt;div class="chartContent"&gt;

&lt;/div&gt;
&lt;!--   &lt;div class="chartContent"&gt;  end   --&gt;


</div>
  <!--   <div class="chart">   end   -->
</template>
<script>
import axios from 'axios';
export default{
methods: {
getTicket: function () {

    return axios.get("http://localhost:2000/" , {
      params: {
        foo: 'SELECT * FROM eur_usd WHERE primary_key = 2;'
      }
    })
    .then(function (response) {
        console.log(response.data.ticket);
        return response.data.ticket;
    })
    .catch(function (error) {
      console.log(error);
    });

},


},
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Мне необходимо каким то образом вытащить значение из запроса.
Что только не пробовал - ниче не помагает.

P.S. Результат работы текущего(не работающего) решения можно увидеть на скрине.
C верху можно увидеть какое значение вернулось.(обьект вместо данных)
С низу в консоли лог - видим, что сам ответ рабочий(без ошибок.)
Именно эти данные и необходимо вывести внутри тега.

Answer 1

Метод getTicket возвращает Promise. Т.е. вызывая функцию, делается ajax запрос к серверу, он занимает некоторое время. Функция же выполняется моментально. По идее надо сделать вот так: В getTicket

return axios.get(url, params)

А при вызове getTicket вот так:

getTicket().then(...).catch(...)