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

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

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

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Laravel

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

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

Q&A

解決済

1回答

4499閲覧

Vue.jsとLaravelで検索機能を作成したいがVueからLaravelへの検索条件の渡し方が分からない。

uuno

総合スコア10

Vue.js

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Laravel

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

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

0グッド

0クリップ

投稿2020/07/26 12:48

###実現したいこと
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

イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

const url = "http://";
const params = {
ここにパラメータ
};

axios
.get(url, {
params
})

等でで、Laravelにgetされます。

投稿2020/07/26 13:08

hrsi

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

uuno

2020/07/28 06:24

お返事遅くなりました、申し訳ございません。 回答ありがとうございます! ご教示いただいた方法でデータの受け渡しが出来そうです。 コントローラーの方も完成に向けて頑張りたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問