Q&A
Laravelで構築しつつ、Vueを勉強しています。
コンポーネントに値を渡したい
:test='sample'
のですが、以下のエラーが出ます。
[Vue warn]: Property or method "sample" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
他のコンポーネントはこのような書き方で値の受け渡しがうまく行っていますが、
なぜエラーが出てしまうのかわかりません…（たぶんかなり初歩的なミスっぽいのですが・・・）
アドバイスいただけますと幸いです。
■blade側 app_spa.blade.php ※Vueコンポーネント部分： <router-view :test='sample'></router-view>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--form用トークンをセット--> <meta name="token" content="{{ csrf_token() }}"> <title>管理者用ページ</title> <link href="{{ mix('/css/app.css') }}" rel="stylesheet"> </head> <body class="hold-transition sidebar-mini layout-fixed accent-info"> <div class="wrapper"> <!-- Content Wrapper. Contains page content --> <div id="app"> <div class="content-wrapper"> app_spa <router-view :test='sample'></router-view> </div> </div> <!-- /.content-wrapper --> <footer class="main-footer text-sm"> 省略 </footer> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
■コンポーネント AccountList.vue ※tableの上に{{ test }}で受け取った値を表示したい。
<template> <div> accountListVue <router-link v-bind:to="{name: 'account.list'}"> <button class="btn btn-success">List</button> </router-link> <div class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"> <h1 class="m-0 text-dark">アカウント一覧</h1> </div> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href=/admin/>Home</a></li> <li class="breadcrumb-item active">Account</li> </ol> </div> </div> <div class="mt-4 mb-2 col-md-2"> <button type="button" class="btn btn-block btn-info">新規作成</button> </div> </div> </div> <section class="content"> <div class="container-fluid"> <div class="card"> <div class="table-responsive mb-4 p-4"> {{ test }} <table class="table table-hover text-sm" id="tbl_product"> <thead> <tr> <th>#</th> <th>メールアドレス</th> <th>名前</th> <th>登録日</th> <th></th> <th></th> </tr> </thead> <tbody> <tr v-for="(account, index) in accounts" :key="index"> <td>{{ account.id }}</td> <td>{{ account.email }}</td> <td>{{ account.name }}</td> <td>{{ account.created_at }}</td> <td><button type="button" class="btn btn-pill btn-block btn-warning">編集</button></td> <td><button type="button" class="btn btn-pill btn-block btn-dark">削除</button></td> </tr> </tbody> </table> </div> </div> </div> </section> </div> </template> <script> export default { props: { csrf: { type: String, }, test: { type: String, }, }, data() { return { accounts: [], } }, mounted() { axios.get('/api/accounts') .then((res) => { this.accounts = res.data; console.log(this.accounts); }); }, computed: { }, methods: { }, } </script>
※こちらを参考に、SPAで構築しています。
よろしくお願いいたします。
よろしくお願いいたします。
自己解決
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。