На странице [object Promise] в консоли корректное значение, почему и как исправить?

Question

[Krivetko83]

Здравствуйте: Всю голову сломал подскажите плиз, на странице размещаю кнопку:

<v-btn fab color="#00C3EA" top right absolute class="white--text">
                                {{ getRating(tutor) }}
 </v-btn>

Вот функция:

async getRating(tutor) {
          let rating=0
          let lang = ''
          if (!this.language) {
             lang = this.$route.query.lang
          } else {
             lang = this.language
          }
          const rat = await this.$axios.$post('/tutors/getTutorRating.php', '{"tutor_id": '+tutor.id+', "lang": "'+lang+'"}').then((responce)=>{
            rating = responce.average_rating
          })
          console.log(rating)
          return rating
        },

В результате в консоли вижу корректное значение (например 3.6) а на странице надпись [object Promise]

Подскажите как исправить?

Comments

[Артём]

Ваша функция getRating асинхронна, т.е. возвращает не значение, а промис с этим значением.

[Krivetko83]

Артём, так .then и вытягивает значение нет?

Answer 1

[WapSter]

rating пропиши в data и меняй значение в своей функции, а функцию запускай по событию клика

Comments

[Krivetko83]

Не могу rating v data, там несколько объектов через v-for

[Krivetko83]

Ну и там нет клика)

[WapSter]

Krivetko83, ну, тогда печально тебе. Асинхронная функция и промисс всегда возвращают промисс

[Krivetko83]

А если убрать async await

[Krivetko83]

WapSter, а почему тогда console.log корректно показывает?

[WapSter]

Krivetko83, потому-что js учить нужно, а не лезть во фреймворки раньше времени. console.log показывает, содержание переменной внутри функции, ты там ничего не возвращаешь.

[Krivetko83]

WapSter, это я сообразил уже после того как написал. Если я делаю функцию не асинхронной, тоже самое получается. Пойду курить учебники, просто это единственное что не понял.

[Krivetko83]

Спасибо