laravelでvueを使うには
laravelでは簡単にvueを使うことができます。
なぜならデフォルトで設定がされているからです。
pacakge.jsonファイルをみると、"bootstrap"や"jquery"や"sass"などが記述されています。
これらのパッケージはインストールする必要があり、npm installでインストールします。
インストールしたら次はビルドして実際に使えるようにします。
npm run devでビルドします。
これで使えるようになりました。あとはプロジェクトに合わせてファイルの構成を決めてください。
blade内でvueを仕様するためにコンテナとコンポーネントタグを用意します。
<div id="app">
<test-componet></test-componet>
</div>
スクリプトを読み込み。スクリプトタグでjsファイルを読み込みます。
<script src="{{ mix('js/app.js') }}">
vueでaxiosを使う
vueでaxiosを使うためにVue.use(VueAxios, axios);をapp.jsファイル内で追記する必要があります。
Vue.use(VueAxios, axios);
次にコンポーネントの登録です
app.jsファイルでコンポーネントを登録します。
Vue.component('test-component',require('/components/TestComponete.vue');
vueファイルの作成
resources/js/components/内にvueファイルを作成します。
TestComponent.vueを作成し次のように記述します
<template>
<div>
<form action="/hoge/hoge" method="POST">
<input type="hidden" name="_token" :value="csrf">
<label for="file">ファイル</label>
<input @change="selectedFile" type="file" name="file" accept=".csv" ref="csvfile">
<button type="submit">送信</button>
</div>
</template>
</script>
ここではポイントが3つあります。
-
csrfトークンを設定しないとpostリクエストが送れません。
いくつか方法はあると思いますがpropsで渡してv-bind(:を使用)で参照するやり方が一番簡単だと思います。 -
@changeでファイルが選択されたら処理を行ないようにしました。
-
refを設定しているところです。これがないと選択したファイルを取得することができません。
templateタグの下にscriptを書いていきます。
<script>
export default {
data () {
return {
file: "",
}
},
methods: {
selectedFile: function() {
let formData = new FormData();
let file = this.$refs.csvfile.files[0]
formData.append('file', file);
this.axios
.post('/送りたいURL', formData)
.then((response) => {
const data = response.data
console.log(data)
})
.catch(function(error) {
alert(error)
})
},
},
props: ['csrf'],
}
</script>
methodsの中で@changeで指定したselectedFileの関数を呼び出します。
FormData()のインスタンスを生成します。csvファイルをcontrollerで処理する際に、この方法じゃないとエラーになりました(違う方法もあるとおもいます)。
次に選択されたファイルを参照するためにthis.$refs.csvfile.files[0]を使用します。
ここで3つ目のポイントのrefが役に立ちます。これはrefを使うことでどこの何を取得するか明確になり、vue側も値を参照できるようになります。
axios
axiosを使用するのは簡単でthis.axiosで使用できます。
.postで第一引数に送りたいURLを指定し、第二引数で送りたい情報を指定します。
.then((response)=>{})でコントローラーで処理した後に帰ってきたものを受け取ります。
今回は受け取ったものをdataに格納してconsole.log(data)で出力しました。
もしエラーだった場合は.catch(function(error){})で処理しました。
以上laravelでvueを使ってaxiosでcsvファイルをpostして処理する方法を簡単に紹介しました。
csvファイルを処理することができれば色々と開発でできることが増えると思います。
この記事がお役に立てれば幸いです。