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

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

ただいまの
回答率

90.76%

  • Laravel 5

    1694questions

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

  • Laravel

    605questions

    LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

  • Vue.js

    579questions

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

vue.jsの変数をlaravel collective formタグに挿入するには??(laravel5.5)

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 180

kazoogon

score 195

laravel5.5にてvue.jsでもっている画像の名前の情報を,laravel collective formの中に挿入しようとしております。

<ul>
    <li v-for="available_teacher in available_teachers">
        <div>
           {!! Html::image('images/teachers/'.available_teacher.teacher.teacher_image[0].name.','profile'--}}//この書き方だとerror出る
            @{{available_teacher.teacher.name}}<br>//←ここではerrorは出ない
        </div>
    </li>
</ul>


また{!! Html::image('images/teachers/'.@{{available_teacher.teacher.teacher_image[0].name}}.','profile'--}}
としてもエラーが出ます。
laravel collectiveのformタグにvue.jsのコードを挿入するにはどうすれば良いのでしょうか??

追記

$available_teachers = Reservation_calender::where('date','=' ,$date)
    ->where('user_id', '=', NULL)
    ->with(['teacher.teacherImage' => function($query){
        $query->where('profile', '=', 1)->latest('created_at');
    }])->get();


このコードで授業可能な先生の情報を取ってきている
→js側にてjson_encode
→画像がconsole.logのavailable_teachersの中身
イメージ説明
(teacher_imageは配列なんだ。。という違和感ありますが。。)

//この書き方だと何も表示されない
{{available_teacher.teacher.teacher_image[0].name}}
//これだとid,name,profileの情報をとってきてくれる
{{available_teacher.teacher.teacher_image[0]}}

という状態で止まっております、申し訳ございませんが、よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

Laravel Collective はサーバーサイドで動作し、Vue.js はクライアントサイドで動作します。
そのため Vue.js の変数を Laravel Collective のコードに挿入することはできません。

今の状態ですと、サーバーサイドで PHP の構文エラーになっていのるかと思います。

Html::imageの最初の引数として渡している URL の部分は、PHP のみで書けるのではないでしょうか。
Laravel Collective を使わず、img要素の:src属性を Vue で書けるのではないでしょうか。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/25 22:32

    回答ありがとうございます、たすかっております。
    こちらPHPの配列をjs側でjson_encode→vue.jsのfor文でavailable_teachersをv-forしているので、phpのみで書くのはできないと思わます。 普通にimgタグに挿入するのが賢明。。なのでしょうか??

    キャンセル

  • 2018/04/25 22:41

    見落としていました、ありがとうございます。回答を修正しました。

    キャンセル

  • 2018/04/26 10:29

    いえいえ、とんでもないです、ありがたいかぎりです。 
    vue.jsで情報がとってこれない場所がありますので、本文の方に追記いたします、申し訳ございませんが、よろしくお願いいたします。

    キャンセル

  • 2018/04/26 11:57 編集

    モデルの種類や関連など、そちらのアプリ全体のことがわからないので正確なことは答えられませんが...

    > teacher_imageは配列なんだ。。という違和感ありますが。。

    おそらく、それはTeacherモデルとTeacherImageモデルのリレーションを1対多と定義しているのではないですか?
    リレーション名は、1対多でしたらteacherImages、1対1でしたらteacherImage、が正しいかと思います。
    単数形/複数形を正しく記述しないと、他人がコードを理解しにくくなってしまうのではないかと心配します。

    キャンセル

  • 2018/04/26 16:29

    ありがとうございます、relation名規則気をつけないとです。。。汗
    理由は他で、ある先生の画像のprofile画像が登録されてなかったのが原因でした。
    {{available_teacher.teacher.teacher_image[0].name}}このコードでnameの値が入ってないときにnullで表示されずにerrorが出るのがよくわかりません。

    キャンセル

  • 2018/04/26 16:38

    おそらく、nameプロパティが存在しないのにアクセスしようとしてエラーとなっているのではないでしょうか。
    nameプロパティは存在して値がnullの場合はエラーとはならず何も表示されないかなと思います。

    キャンセル

  • 2018/04/26 16:41

    [Vue Devtools](https://jp.vuejs.org/v2/guide/installation.html#Vue-Devtools)使うとdebugしやすいですよ。

    キャンセル

  • 2018/04/26 16:57

    あ、このdevtools知っていて拡張機能に入れたんですけど、
    https://teratail.com/questions/120984
    実はここで質問したようにCDNしか効かない
    →minifiedのCDN使用していた、しかしこれではdevtools使えない
    →normalのCDNを使用→vue.jsが効かない。。

    という状態なんですよね。。。なにか「こことここの設定どうなってる??」などあったらぜひ言っていただきたい限りです、vue routerのcomponentとかも効かないので困ってます

    キャンセル

  • 2018/04/26 17:15

    > →normalのCDNを使用→vue.jsが効かない。。
    これがよくわからないですね。
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    とか普通に使えています。

    キャンセル

0

解決策は無いかと思われるので強引な方法で・・・
1.headerにテンプレートとして埋めておいてreplace置換

<script>
    window.imageTemplate = '{{Html::image('xxxxx', 'profile')}}';
</script>

...

<div>
  @{{ 
    window.imageTemplate.replace(
      'xxxxx',
      available_teacher.teacher.teacher_image[0].name
    ) 
  }}
</div>

2.でもやっぱりvueのループ内なので、素直にimg直接。。。

<div>
  <img
    :src="
      location.protocol + '//' + location.host +
      '/images/teachers/' + available_teacher.teacher.teacher_image[0].name
    "
    alt="profile"
  >
</div>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/26 17:01

    回答ありがとうございます。
    おっしゃる通りfor文の中ってのがややこしいんですよね。。。 ということで
    <li v-for="available_teacher(index) in available_teachers">
      //省略
      <img v-bind:src='image_src(index)'/>
    でjs側を
    <img v-bind:src='image_src(index)'/>

    って感じにしてみましたが、ダメでしたね。。
    なんかこんなノリでindex渡せれたらたぶん一番みやすいような気がするのですが。。

    キャンセル

  • 2018/04/26 17:10

    それなら

    <li v-for="tInfo in available_teachers">
    <img :src="image_src(tInfo)">



    vueのmethodに
    methods: {
    image_src: function (info) {
    return location.protocol + '//' + location.host +
    '/images/teachers/' + info.teacher.teacher_image[0].name;
    }
    }

    で関数作っておけばよいかと

    キャンセル

  • 2018/04/26 17:54

    src="/images/teachers/"+ available_teacher.teacher.teacher_image[0].name +"

    これだとエラーでるんですが、単純に文字+変数+文字 になっていないんですかね???

    キャンセル

  • 2018/04/26 18:13

    最後の+の後に引数がないからとか。。?

    キャンセル

  • 2018/04/26 18:15

    srcはバインドしないと(:src)式として評価されないとか。。

    キャンセル

  • 2018/04/26 18:22

    ああそういうことですか。vueではバインドした属性の““内だけjsとして評価されますので一旦“閉じると外はただのhtmlです

    キャンセル

  • 2018/04/26 20:04

    :src="'/images/teachers/'+ available_teacher.teacher.teacher_images[0].name"

    これで表示されました。 こちら勉強になりました、ありがとうございます。

    キャンセル

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

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • Laravel 5

    1694questions

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

  • Laravel

    605questions

    LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

  • Vue.js

    579questions

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