質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

261閲覧

Vue.js 動的クラス

Toru122

総合スコア1

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2021/04/30 02:14

前提・実現したいこと

<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] と表示されます。」

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

投稿2021/05/01 08:32

Masa-Shin

総合スコア269

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問