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

Question

初心者です。

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

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

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

apiのTaskController

<?php

namespace App\Http\Controllers\Api;

use Request;
use App\Http\Controllers\Controller;
use App\Http\Requests\TaskRequest;
use App\Task;

class TaskController extends Controller
{
    public function index()
    {
      $queryTitle = Request::get('title');
      $queryTitleには入力した値が入ってきている

      return Task::where('title', 'LIKE', "%$queryTitle%")->get();
      //DB::table('tasks')->where('title', 'LIKE', '%'.$queryTitle.'%')->get(); こんな書き方もしてみたが変わらず
    }
}

Route::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>

子コンポーネント
<template>
  <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" v-model="keyword">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" v-on:click.prevent="getSearch()">Search</button>
  </form>
</template>

<script>
export default {
  data(){
    return {
      keyword: '',
      tasks: [],
    }
  },
  methods: {
    getSearch(){
      axios.get('api/tasks/search?title=' + this.keyword)
        .then(res => {
          this.tasks = this.data;
          console.log(this.data)
        })
        .catch(error => {
          console.log('データの取得に失敗しました')
        });
    }
  },
  watch: {
    keyword(){
      this.getSearch();
    }
  }
}
</script>

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

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

よろしくお願いします。

php 7.4.2
laravel 6.0
vue.js 2.6.11

Answer 1

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

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

Comments

[tenlife]

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

[kiddayo]

おっ！よかったです！