###実現したいこと
Vue.js,Laravel,axiosを利用したWebアプリでデータ検索機能(条件付きGET)を作成したい。
###発生している問題
Vue側で入力したデータ(検索条件)をLaravelに渡す方法が分からない。
###該当のソースコード
Vueコンポーネント
vue
1<template> 2 <div class="home"> 3 <Header></Header> 4 <div class="title"> 5 <h1>データ検索</h1> 6 </div> 7 <div class="koumoku"> 8 <div class="flex time"> 9 <p>使い道</p> 10 <select v-model="tukaimiti" name="tukaimiti" class="tukaimiti"> 11 <option class="pull-title" value="0"> </option> 12 <option>移動費</option> 13 <option>食事</option> 14 <option>ゲーム</option> 15 <option>買い物</option> 16 <option>その他</option> 17 </select> 18 </div> 19 <div class="flex day"> 20 <p>金額</p> 21 <input class="nyu" maxlength="8" v-model="money" type="text"> 22 <p>円以上</p> 23 </div> 24 <div class="touroku-btn"> 25 <button @click="kensaku">検索</button> 26 </div> 27 </div> 28 <div class="kekka"> 29 <h2>検索結果</h2> 30 </div> 31 <div class="koumoku-bar"> 32 <p class="hi">登録者</p> 33 <p class="miti">使い道</p> 34 <p class="kingaku">金額</p> 35 <p class="me">メモ</p> 36 </div> 37 <div class="data" v-for="data in datas" :key="data.key"> 38 <p class="hi">{{data.data}}</p> 39 <p class="miti">{{data.tukaimiti}}</p> 40 <p class="kingaku">{{data.money}}円</p> 41 <p class="me">{{data.memo}}</p> 42 </div> 43 </div> 44</template> 45<script> 46import axios from "axios"; 47import Header from 48"../components/header" 49export default{ 50 components: { 51 Header 52 }, 53 data(){ 54 return{ 55 datas:[] 56 }; 57 }, 58 methods: { 59 kensaku(){ 60 axios.get("https://whispering-brushlands-62139.herokuapp.com/touroku") 61 .then(response => this.datas = response.data), 62 alert("結果を出力しました"); 63 this.tukaimiti = ""; 64 this.money = ""; 65 } 66 } 67 } 68</script>
Laravelコントローラー
MoneyController
1<?php 2 3namespace App\Http\Controllers; 4 5use App\Money; 6use Illuminate\Http\Request; 7use Illuminate\Support\Facades\DB; 8use Carbon\Carbon; 9 10class MoneyController extends Controller 11{ 12↓データ登録(別コンポーネントにて利用しています)↓ 13 public function post(Request $request) 14 { 15 $now = Carbon::now(); 16 $today = Carbon::today(); 17 $param = [ 18 "created_at" => $today, 19 "updated_at" => $now, 20 "tukaimiti" => $request->tukaimiti, 21 "money" => $request->money, 22 "memo" => $request->memo, 23 "data" => $request->data 24 ]; 25 DB::insert('insert into money (created_at,updated_at,tukaimiti,money,memo,data) 26 values (:created_at,:updated_at,:tukaimiti,:money,:memo,:data)',$param); 27 return response()->json(); 28 } 29↓全データ取得↓ 30 public function show() 31 { 32 $moneys = Money::all(); 33 return response()->json($moneys); 34 } 35↓検索機能↓ 36 public function search(Request $request) 37 { 38 $tukaimiti = $request->tukaimiti; 39 $money = $request->money; 40 41 $query = Money::all(); 42 43 if(!empty($tukaimiti)) 44 {$query->where("tukaimiti",$tukaimiti);} 45 if(!empty($money)) 46 {$query->where("money", '>=',$money);} 47 if(!empty($tukaimiti and $money)) 48 {$query->where("tukaimiti",$tukaimiti)->where("money", '>=',$money);} 49 return response()->json($query); 50 } 51}
データテーブル
Schema::create('money', function (Blueprint $table) { $table->id(); $table->timestamps(); $table->string('tukaimiti'); $table->integer('money'); $table->string('memo')->nullable(); $table->string('data'); });
###補足情報
下記画像が完成イメージです。
使い道(tukaimiti)と金額(money)をVue側で入力しそれを検索条件としてデータを抽出したいです。
Vue側のメソッドをどう記述すればLaravelに検索条件を渡せるのかが分かりません。
現在はコントローラー部分にある全データ取得のAPIを利用してデータの取得のみは行えるようになっています。
どなたかご教示お願いしますorz
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/28 06:24