[object promise]が表示されてしまう。

Question

受け持ちの生徒数を表示しようと思い、以下のように書きましたが、[object promise]と表示されるだけで、数値が表示できません。consoleには表示できるので、不思議でたまらないです。表示の仕方を教えていただきたいです。

<template>
<v-for ="teacher in teachers">
{{getStudentCount(id)}}
</template>

async getStudentCount(id){
  try{
    let list = await this.$axios.$get(this.$axios.URL + "/teachers/" + id + "/application_statuses")
    console.log(list.length)
    return list.length
  }catch(err){
    console.log(err)
    return "エラー"
  }
}

これで、list.lengthを表示したいのですが、console.log(list.length)では欲しいデータがとってこれるのに、表示上では、[object promise]がでてしまいます。

そもそも、以下のようにしてみたのですが、[object promise]しか表示されません。いったいなぜなのでしょうか。どのようにすれば、よいのでしょうか。

async getStudentCount(id){
  try{
    return 10
  }catch(err){
    console.log(err)
    return 7
  }
  return 6
}

Answer 1

[object promise]と表示されるだけで、数値が表示できません。

はい、この関数はasyncですので、メッセージの通り、外から見た返り値はPromiseです。

consoleには表示できるので、不思議でたまらないです。

async関数の内部ではそのように扱えます。

Comments

[penguin3]

回答ありがとうございます。そういうものなんですね。何かいい方法がないか考えてみます！