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

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

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

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

Laravel

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

検索

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

Q&A

解決済

1回答

3532閲覧

Laravel + Vueでaxiosを使用した検索機能でundefinedが出てしまう

tenlife

総合スコア70

Vue.js

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

Laravel

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

検索

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

0グッド

0クリップ

投稿2020/03/11 13:55

初心者です。

laravelとvueを使って検索機能を実装しようとしています。

現状は検索メソッドは動いているが中身を引っ張ってきて無いです。コンソールにはundefinedが表示されます。

参考にしたサイト
https://www.webopixel.net/javascript/1379.html

TaskController

1apiのTaskController 2 3<?php 4 5namespace App\Http\Controllers\Api; 6 7use Request; 8use App\Http\Controllers\Controller; 9use App\Http\Requests\TaskRequest; 10use App\Task; 11 12class TaskController extends Controller 13{ 14 public function index() 15 { 16 $queryTitle = Request::get('title'); 17 $queryTitleには入力した値が入ってきている 18 19 return Task::where('title', 'LIKE', "%$queryTitle%")->get(); 20 //DB::table('tasks')->where('title', 'LIKE', '%'.$queryTitle.'%')->get(); こんな書き方もしてみたが変わらず 21 } 22}

api

1Route::get('tasks/search', 'Api\TaskController@index');
親コンポーネント <template> <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-primary"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <router-link v-bind:to="{name: 'task.list'}"> <button class="btn btn-primary" type="submit">List</button> </router-link> </li> <li class="nav-item"> <router-link v-bind:to="{name: 'task.create'}"> <button class="btn btn-primary" type="submit">Add</button> </router-link> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <TaskSearchComponent />子コンポ呼び出し </div> </nav> </template> <script> import TaskSearchComponent from './TaskSearchComponent' export default { components: { TaskSearchComponent, }, } </script>

TaskSearchComponent

1子コンポーネント 2<template> 3 <form class="form-inline my-2 my-lg-0"> 4 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" v-model="keyword"> 5 <button class="btn btn-outline-success my-2 my-sm-0" type="submit" v-on:click.prevent="getSearch()">Search</button> 6 </form> 7</template> 8 9<script> 10export default { 11 data(){ 12 return { 13 keyword: '', 14 tasks: [], 15 } 16 }, 17 methods: { 18 getSearch(){ 19 axios.get('api/tasks/search?title=' + this.keyword) 20 .then(res => { 21 this.tasks = this.data; 22 console.log(this.data) 23 }) 24 .catch(error => { 25 console.log('データの取得に失敗しました') 26 }); 27 } 28 }, 29 watch: { 30 keyword(){ 31 this.getSearch(); 32 } 33 } 34} 35</script>

コントローラーまでkeywordは飛んで行っていると思うのですが、コントローラーが原因でしょうか?

どなたか知恵を貸していただきたいです。

よろしくお願いします。

php 7.4.2
laravel 6.0
vue.js 2.6.11

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

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

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

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

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

guest

回答1

0

ベストアンサー

getSearch(){ axios.get('api/tasks/search?title=' + this.keyword) .then(res => { console.log(res) }) .catch(error => { console.log('データの取得に失敗しました') }); }

resの中にデータが入ってきてると思いますので、
resをconsole.logで出してみてください!

投稿2020/03/11 13:58

kiddayo

総合スコア240

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

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

tenlife

2020/03/11 21:00

ありがとうございます!そこの結果を元に this.tasks = this.data; => this.tasks = res.data; に変更して値を表示できました!
kiddayo

2020/03/11 22:20

おっ!よかったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問