Laravelにて。モーダルをVue.jsで実装する方法

Question

LaravelとVueの勉強中です。

テーブルの行にあるボタン「出入」をクリックすると、そのデータが格納されたモーダルが出るというページで、
モーダルをVue.jsにしたいと思っています。

このようなテーブルがあり、「出入」をクリックするとモーダルが出ます。

モーダルに$productオブジェクトを渡す部分の実装方法についてアドバイスをいただけますと幸いです。

■bladeのコード　index.blade.php

@extends('layouts.admin_app')

@section('content')
<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">商品一覧vue</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href={{ route('admin.index') }}>Home</a></li>
                    <li class="breadcrumb-item active">Product</li>
                </ol>
            </div>
        </div>
        <div class="mt-4 mb-2 col-md-2">
            <button type="button" onclick="location.href='{{ route('product.add') }}'" class="btn btn-block btn-info">新規作成</button>
        </div>
    </div>
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="table-responsive mb-4 p-4">
                        {{ $products->links('pagination::bootstrap-4') }}
                        <table class="table table-hover text-sm" id="tbl_product">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th>#</th>
                                    <th class="wide">商品名</th>
                                    <th>価格</th>
                                    <th class="middle">詳細</th>
                                    <th>有効/無効</th>
                                    <th>Available</th>
                                    <th>登録日</th>
                                    
                                </tr>
                            </thead>
                            <tbody>
                            @if($products)
                                @foreach($products as $product)
                                <tr>
                                    <td><button type="button" class="btn btn-pill btn-block btn-info largeModal" data-toggle="modal" data-target="#modal-lg" data-product="{{ $product }}" }}">出入</button></td>
                                    <td><button type="button" onclick="location.href='{{ route('product.edit', ['product' => $product]) }}'" class="btn btn-pill btn-block btn-warning">編集</button></td>
                                    <td>{{ $product->id }}</td>
                                    <td>{{ $product->name }}</td>
                                    <td>{{ $product->price }}</td>
                                    <td>{{ $product->description }}</td>
                                    <td>{{ Util::get_yukoflg($product->yuko_flg) }}</td>
                                    <td>{{ $product->stocks->avairable }}</td>
                                    <td>{{ $product->created_at->format('Y/m/d H:i') }}</td>
                                </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<!-- /.main content -->
<!-- modal -->
<product-inout-modal
    :csrf='{{ json_encode(csrf_token()) }}'
    :product='@json($product)'
>
</product-inout-modal>
<!-- /.modal -->
@endsection

ここまで来て、モーダルのコンポーネントが、テーブルの外なので、$productを<product-inout-modal>に渡せないな…となりました。
……テーブルとモーダルのセットをvueのコンポーネントにして、そこから更にモーダルコンポーネントにproductオブジェクトを渡す、という方法も考えましたが、もう少しシンプルに行う方法はありますでしょうか？

Answer 1

vueの使い方としてコンポーネントだけとして使うのは良くないです。
テーブルを含めてVueで書いた方が良いです。

---

雑にやるならmodalをテーブルのtdに含めてmodalも何個も召喚しましょう。

Comments

[mikeko0901]

ありがとうございます。
テーブルもVueで書きました。
今回、コンポーネント的な使い方をしてしまいましたが、Laravelとvueを使うなら、Laravel側（コントローラー等）はAPIのような使い方でフロント側はVueメインのSPA的な作りの方がよいのでしょうか？