Vue.js 動的クラス

Question

前提・実現したいこと

<ul class="home" v-for="(value, index) in shares" :key="index">
         <li>
           <button
             @click="
               $router.push({
                 path: '/review/' + value.data.id,
                 params: { id: value.data.id },
               })">
             {{ value.data.title }}のレビューを見る
           </button>
         </li>
         <li></li>
         <li class="point">
           平均点:<span :class="averageColor(value.average)">{{
             value.average
           }}</span>
         </li>
         <li>
           <button
             v-if="login"
             @click="
               $router.push({
                 path: '/post/' + value.data.id,
                 params: { id: value.data.id },
               }) ">
             レビューを投稿する
           </button>
           <div v-else-if="!login">
             <button class="login" @click="$router.push('/login')">
               ログインしてレビューを投稿する
             </button>
             <button class="signup" @click="$router.push('/signup')">
               ユーザー登録してレビューを投稿する
             </button>
           </div>
         </li>
       </ul>

Vue.jsとLaravelを組み合わせて映画レビューサイトをしています。
まず最初のページで複数ある映画のタイトルをv-forで取り出し後にその映画に関するレビューを投稿するページやレビューを見るといったページで遷移します。

async posted(id) {
      let datas = [];
      const reviews = await axios.get(
        "https://intense-falls-67346.herokuapp.com/api/review/show?id=" + id);
      datas.push(reviews.data.data);
      let posted_user_id = [];
      for (let i = 0; i < datas[0].length; i++) {
        posted_user_id.push(datas[0][i]["item"].user_id);
      }
      if (posted_user_id.indexOf(String(this.$store.state.user.id)) >= 0) {
         console.log(posted_user_id);
         return true;
      } else if (posted_user_id.indexOf(String(this.$store.state.user.id)) < 0){
          console.log(posted_user_id);
          return false
      }
    },

このメソッドでそれぞれの映画のレビューの投稿しているユーザーのIDを取得し現在ログインしているユーザーのIDがあれば、true,なければfalseを返します。
コンソールで確認したらしっかり挙動していました。

   <div v-if="posted(value.data.id)">投稿済みです</div>

このようにv-ifで戻り値がtrueの場合には表示するようにしたいのですがうまく挙動しません。
どのように対処すればよろしいでしょうか？

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

HTML上では

<p>{{posted(value.data.id)}}</p> は [object Promise] と表示されます。」

Answer 1

postedは非同期関数なので、返り値はPromiseというものになります。
Promiseから値を取り出すにはawaitを付ける必要があります。

つまりawait posted(value.data.id)にしてあげれば、きちんとtrue,falseで帰ってくるかと思います。