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

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

ただいまの
回答率

90.34%

  • JavaScript

    17496questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Laravel 5

    2070questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Vue.js

    836questions

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

v-for外の要素を表示・非表示制御したい(laravel5.5 vue.js)

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 576

kazoogon

score 240

概要

laravel5.5 vue.jsを使用し学校システムを構築しております。
画像はある日の、ある時間の授業可能な先生一覧
→reserveボタン押せば予約できる
イメージ説明

<li v-for="(row,timeIndex) in rows">
    <div class="time col-md-2 border">
        @{{row.time}} //画像左の時間表示(17:00~18:00など)
    </div>
    <div class="teachers col-md-10 border">
        <ul>
            <li v-for="available_teacher in available_teachers" v-if="available_teacher.user_id == null">//available_teacher.user_idに自分のIDが入っている = その時間はもう予約できないようにする
                <div class="teacher text-center" v-if="available_teacher.time_id == timeIndex">
                    <img class="thumb img-circle" (画像部分省略)><br>
                    @{{available_teacher.teacher.name}}<br>
                    <button type="button" (ボタン部分省略)>Reserve</button>
                </div>
            </li>
        </ul>
    </div>
</li>

実現したいこと

例えば画像の18:00~19:00のどれか先生を予約
→その時間同じ生徒が二人先生を予約するをを防ぐために、「予約済み」などの表記
 

問題点

<li v-for="available_teacher in available_teachers" v-if="available_teacher.user_id == null">
    <div>
        省略
    </div>
</li>
<li v-else>
    予約済み
</li>


このようにavailable_teachersの情報にuser_idが入っていたら(=自分がすでに予約していたら)、「予約済み」を表示したい
→この書き方だとまだ他の先生の情報が画像のように残ってします
→クラス名teachersのdiv要素を表示・非表示制御したいが、available_teachersをv-forでまわしている外なのでできない。。。

イメージ説明
ここで困っております、よろしくお願いいたします。

回答受けての追記

//js側
//arr_isReservedで自分が予約した授業の情報をとってくる
//→isReserved_timeにその時間idの配列を入れる
var arr_isReserved = @json($arr_isReserved);
var isReserved_time = [];
for(var i=0; i<arr_isReserved.length; i++){
    isReserved_time.push(arr_isReserved[i].time_id);
}


//html側
//時間idの配列がtimeInboxに含まれていたら「You already reserved!!」と表示・その他の先生は表示させない
<div class="reserved col-md-10 border text-center" v-if="isReserved_time.some(function(v){ return v === timeIndex})">//3行追加
    You already reserved!!<br>
</div>

<div class="teachers col-md-10 border" v-else>
    <ul>
        <li>
            <div v-for="available_teacher in available_teachers" class="teacher text-center" v-if="available_teacher.time_id == timeIndex">
                {{--{!! Html::image('images/teachers/'.available_teacher.teacher.teacher_image[0].name.','.profile.','.array('class' => 'thumb img-circle', 'height' => 110, 'width' => 110)) !!}<br>--}}
                <div class="teacher-img" @click="teacherDetail(available_teacher.teacher.name, available_teacher.teacher.comment)">
                    <img class="thumb img-circle" :src="'/images/teachers/'+ available_teacher.teacher.teacher_images[0].name" alt="profile" width=110 height=110><br>
                    <div class="mask">
                        <div class="detail">Detail</div>
                    </div>
                </div>
                @{{available_teacher.teacher.name}}<br>
                <button type="button" class="btn btn-warning" @click="reserve(available_teacher.teacher_id, available_teacher.time_id, chosen_date)">Reserve</button>
            </div>
        </li>
    </ul>
</div>

ここまでできましたが、「You already reserved!!」部分に予約した先生の情報を表示したい
→arr_isReservedの情報を使用したいが、htmlに追加した部分にどのように記載すればよいかでつまずく。。
 
ご指摘の通りlaravelで制御した方が簡単かもしれませんが、vue.jsのfor文でまわしたtimeIndexキーをlaravelで比べる必要有+ajaxを使用して日ごとの先生空き情報を表示するので、JS側で処理した方がよいと思われます。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

ループの中でイベントを発生させて親要素を非表示にするという方法が思いつきますが、後で読んでわからないコードになると思います。

素直に考えて、rowsを作るときにrow.userReserved みたいな要素を設けましょう。DB操作したほうが作り安いと思うので、javascriptで作るよりlaravel側で作って・・・

というより、もうrow.avairable_teatures、のような時間帯ごとの先生まで作ってしまったほうがループも減りコードもすっきりします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/16 19:32

    回答ありがとうございます。
    遅れて申し訳ございませんが、本文の「回答を受けての追記」に追記させていただきました。
    よろしくお願いいたします。

    キャンセル

  • 2018/05/29 22:48 編集

    ご指摘の通りrowsの中に「teachers(授業可能な先生), reserved_teacher(自分が予約した先生)」を追加いたしました。
    foreach($rows as &$row){
    foreach($available_teachers as $available_teacher){
    if($row["time_id"] == $available_teacher["time_id"]){
    array_push($row['teachers'], $available_teacher);
    if($available_teacher["user_id"] != NULL){
    $row["reserved_teacher"] = $available_teacher;
    }
    }
    }
    }
    このようなforeachを繰り返すAPIができたので、時間をかけないためにも他の単純な方法があれば幸いですが、ひとまずこの実装でいこうと思います

    キャンセル

0

なんだか難しい解決策へ走ってるように見えました。
質問を読んだ感じでは、内側のループを整理するだけで実現可能だと思います。

内側のループで扱う条件を整理すると、

  1. 時間割にマッチする先生を表示する
  2. 1が満たされる場合
    2-a. 未予約なら予約できるように表示する
    2-b. 予約済みなら予約済みと表示する

ですよね。
v-ifを入れ子にすれば上手く行く事が明白かと思います。
知っているかもしれませんが、2-a,2-bの分岐はv-ifv-elseを使えば書けます。

<div v-if="isSomethingSatisfied">
</div>
<div v-else>
</div>

ここまで知識が揃えば、あとはちょっとコードを書き直すだけです。
※ 予約済みのマークアップは省略してます。

<li v-for="available_teacher in available_teachers">
  <template v-if="available_teacher.time_id == timeIndex"> <!-- 1 -->
    <!-- available_teacher.user_idに自分のIDが入っている = その時間はもう予約できないようにする -->
    <div class="teacher-center" v-if="available_teacher.user_id == null"> <!-- 2-a -->
      <!-- 予約可能 -->
      <img class="thumb img-circle" (画像部分省略)><br>
      @{{available_teacher.teacher.name}}<br>
      <button type="button" (ボタン部分省略)>Reserve</button>
    </div>
    <div class="teacher text-center" v-else> <!-- 2-b -->
      <!-- 予約済み -->
    </div>
  </template>
</li>

どうでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/23 17:32

    回答ありがとうございます。
    これだと同じ時間帯に複数の先生を予約できてしまわないでしょうか??勘違いでしたら申し訳ないです、よろしくお願い致します。

    キャンセル

  • 2018/05/23 17:43

    ごめんなさい。出来てしましいますね。

    キャンセル

  • 2018/05/23 18:30

    最初の回答者さんも書いてますが、やはり予約ができるかどうかは時間帯を見ないと行けないのに、先生で判定しようとしてる所に無理があります。
    ただし、予約してる先生も表示したいとの事なので、予約した時間帯と先生の情報を持った配列も欲しいです。
    arr_isReservedに先生の情報が入ってるのがベストなのですが、入ってないのなら取り敢えず下記のようにすればいけるかと思います。

    ※my_user_idは自分のIDになります。

    <div class="reserved col-md-10 border text-center" v-if="isReserved_time.some(function(v){ return v === timeIndex})">
      <div v-for="available_teacher in available_teachers.filter(_ => _.time_id === timeIndex && _.user_id === my_user_id)">
    You already reserved!! {{ available_teacher.teacher.name }} <br>
    </div>
    </div>

    キャンセル

  • 2018/05/26 21:46 編集

    (現在のとってくるtableのカラム構造が)
    ・dateカラムには、日付の情報のみ(例、2018-05-27)
    ・時間はtime_idカラムに1~9の数字が入り、timeテーブルに時間(例,20:00~21:00)があるので、そこと結合している。

    となっています。ここのdateに時間までの情報を入れるように実装し直すのがbestな方法かなと思っております。。汗

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17496questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Laravel 5

    2070questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Vue.js

    836questions

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