Q&ALaravel Framework 8.83.19
認証機能はLaravel Breezeを使用して実装しました。
以下、実装まで行ったことです。
①Laravel Breezeで認証まわりを実装しました。
②Laravel mixを使用したかったので、
こちらのサイトを参考に、ViteからLaravel mixにしました。
③認証まわり実装後、フロント部分にVue.jsを使いたくなり、こちらのサイトを参考にしながら、
Vue.jsをインストールしました。
●Vue・Vuex・Vue-Routerをインストール
npm install vue@2 vue-loader@15 vue-template-compiler@2 npm install vuex@3 vue-router@3
④その後、npm run dev時にエラーが出たので、こちらのサイトを参考にwebpack.mix.jsの修正をしました。
⑤コンポーネントをテストしたく、以下のようなサンプルページを作成しました。
現状
しかし、inputエリアに入力した値をinputエリアの下に表示するようにしているのですが表示されません。
また、ボタンをクリック時の関数が実行されません…
コード
vue.jsコンポーネント OwnerForm.vue
<template> <div> コンポーネントだよ <div> <input type="text" class="" name="name" v-model="name" maxlength="80" /> </div> {{ name }} <button type="button" @click="regist" class=" text-white bg-indigo-500 border-0 py-2 px-4 focus:outline-none hover:bg-indigo-600 rounded text-lg " > ボタン </button> </div> </template> <script> export default { props: {}, data() { return { name: "", }; }, mounted() { console.log("test"); }, methods: { regist: () => { console.log("oshitayo"); }, }, }; </script>
※mountedのconsole.log("test");は、コンソールに書き出されます。
blade側(create.blade.php)
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Fonts --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"> <!-- Styles --> <link rel="stylesheet" href="{{ mix('css/app.css') }}"> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> </head> <body class="font-sans antialiased"> <div class="min-h-screen bg-gray-100" id="app"> <!-- Page Heading --> <header class="bg-white shadow"> <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> ヘッダー </div> </header> <!-- Page Content --> <main> <div class="py-12" x-data="app"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg"> <div class="p-6 bg-white border-b border-gray-200"> <section class="text-gray-600 body-font relative"> <div class="container px-5 mx-auto"> <div class="flex flex-col text-center w-full mb-12"> <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900"> オーナー登録</h1> </div> <div> <owner-form></owner-form> </div> </div> </section> </div> </div> </div> </div> </main> </div> <footer> フッターdayo </footer> <!--vueで追記--> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
app.js
import './bootstrap'; import Vue from 'vue' window.Vue = require('vue'); Vue.component('OwnerForm', require('./component/admin/OwnerForm.vue').default); const app = new Vue({ el: '#app', })
package.json
{ "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "@tailwindcss/forms": "^0.5.2", "alpinejs": "^3.4.2", "autoprefixer": "^10.4.2", "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.4.6", "tailwindcss": "^3.1.0", "vue-loader": "^15.10.0", "vue-template-compiler": "^2.7.8" }, "dependencies": { "vue": "^2.7.8", "vue-router": "^3.5.4", "vuex": "^3.6.2" } }
webpack.mix.js
const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel applications. By default, we are compiling the CSS | file for the application as well as bundling up all the JS files. | */ mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ require('postcss-import'), require('tailwindcss'), require('autoprefixer'), ]).vue();
アドバイスいただけますと幸いです。
よろしくお願いいたします。
【追記①】
コンポーネントを呼び出すblade側（create.blade.php)を、以前実装してVueコンポーネントを呼び出すのに成功したbladeとコピーして作成しましたら、v-bindもボタンクリック時のイベントも実行されました！
実行されたcreate.blade.php
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--form用トークンをセット--> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Tell the browser to be responsive to screen width --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--追記--> <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700" 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"> <!-- 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">商品編集2</h1> </div> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item active">Product</li> </ol> </div> </div> </div> </div> <!-- /.content-header --> <!-- Main content --> <section class="content"> <div class="container-fluid"> <div class="row"> <div class="col-12"> <owner-form></owner-form> </div> </div> </div><!-- /.container-fluid --> </section> <!-- /.main content --> </div> </div> <!-- /.content-wrapper --> <footer class="main-footer text-sm"> フッター All rights reserved. </footer> </div> <!-- ./wrapper --> <!--追記--> <script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!--vueで追記--> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
v-bindされております・・・
なぜなのか、お分かりになりましたらアドバイスお願いします。
（私も現在調査中です…）
回答1件
0
自己解決
実行されなかったblade側 create.blade.phpのheadから、以下を削除しましたらvue.jsのメソッドやv-bindが実行されるようになりました。
<!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script>
・・・フロント側はAdminLTEなどを用いて構築した場合、本当にこのapp.jsを読み込まなくても問題ないものでしょうか・・・
投稿2022/07/26 13:59
編集2022/07/26 14:31
総合スコア227
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。