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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

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

Laravel

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

解決済

Laravel8 BreezeでVue.js2を使用したいがv-bindやmethodが効かない

mikeko0901
mikeko0901

総合スコア214

Vue.js

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

Laravel

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

1回答

0リアクション

0クリップ

385閲覧

投稿2022/07/26 04:18

編集2022/07/26 13:49

Laravel 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されております・・・

なぜなのか、お分かりになりましたらアドバイスお願いします。
(私も現在調査中です…)

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

Vue.js

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

Laravel

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