【Laravel5.8 + Vue】LaravelにVueのComponentを作成したい
前回の記事では、Laravel5.8でVue.jsを使用する際の基本的な操作をご紹介しましたがComponentを追加したい場合の手順も記載しておきます。
/resources/js/components/MyComponent.vueの作成
まずは追加したいComponentを該当のディレクトリに追加しましょう。
<template>
<div>
<p>{{msg}}</p>
<input type='text' v-model='name'>
<button @click='doAction' />
</div>
</template>
<script>
export default{
data: function () {
return{
msg: '',
name: ''
}
},
methods: {
doAction: function () {
this.msg = this.name + 'さん、こんにちは〜'
}
}
}
</script>
細かい説明は省きますが、inputタグの中のデータをdataのnameとv-modelでつなぎ、@click（もしくはv-on:click）でmethodsを呼び出せるようにします。
@clickイベントでdataが反映されると、{{msg}}に対して入力されたデータと、「さん、こんにちは〜」という文字列がデータバインディングで出力されるようになっています。
/resources/js/app.jsに追記
Vue.component('my-component', require('./components/MyComponent.vue').default);
componentのパスと名前に応じて上記を変える必要がありますが、手順通りにComponentを該当ディレクトリに入力した場合は上記の記載でOKです。
第一引数の「'my-component'」が後ほどコンテナタグ内に書き込むタグ名となるため、注意です！
Componentを追加する度に、app.jsへの追記が必要となるため覚えておきましょう。
ルートタグに追記
前回の記事では、welcome.blade.phpへコンテナタグを設けていましたので、今回もこちらの方にMyComponent.vueで作成したtemplateを表示させましょう。
<!DOCTYPE html> <html lang="ja"> <head> <title>Index</title> <!--/resoces/css/ と /public/css/ のCSSファイルを読み込む--> <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css"> <!--LaravelでVueを使用する際のお約束！--> <meta name="csrf-token" content="{{ csrf_token() }}"> </head> <body> <h1>Hello/Index</h1> <p>{{$msg}}</p> <!--VueのComponentを読み込むためにはappというidのdiv要素を配置する--> <div id="app"> <!--「appというidのdiv要素」の中にcomponentの設置--> <example-component></example-component> <my-component></my-component> ★ </div> <!--/resoces/js/ と /public/js/ のJSファイルを読み込む--> <!--コンテナタグ（= <div id="app"> ）の後に記述する--> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
こちらでComponentが実際に表示されているか、そしてinputタグから入力してボタンを押すとメッセージが出力されるかを確認してみましょう。
