On the [object Promise] page in the console, the value is correct, why and how to fix it?

Question

Vue.js

Hello: I broke my whole head, tell me pliz, I place a button on the page:

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

Here is the function:

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

As a result, I see the correct value in the console (for example, 3.6) and on the page the inscription [object Promise]

Tell me how to fix it?

Answer 1

write rating in data and change the value in your function, and run the function on a click event