vueからaxiosを使用してLaravelのコントローラ側に値を投げているが取得できない

状態

実現したいこと

vueからaxiosを使用してLaravelのコントローラ側で値を取得したい

該当のソースコード

App.vue

vue
1
2
3<template>
4
5
6  <v-card
7  elevation="2">
8
9  <v-col cols="12" class="d-flex align-center">
10    <h2>{{ list.data.data[0].id }}</h2>
11      <p>{{ list.data.data[0].description  }}</p>
12    </v-col>
13    <v-col cols="12" class="d-flex align-center">
14      <h2>{{ list.data.data[1].id  }}</h2>
15      <p>{{ list.data.data[1].description  }}</p>
16    </v-col>
17    <v-col cols="12" class="d-flex align-center">
18      <h2>{{ list.data.data[2].id  }}</h2>
19      <p>{{ list.data.data[2].description  }}</p>
20    </v-col>
21    <v-col cols="12" class="d-flex align-center">
22      <h2>{{ list.data.data[3].id  }}</h2>
23      <p>{{ list.data.data[3].description  }}</p>
24    </v-col>
25    <v-col cols="12" class="d-flex align-center">
26      <h2>{{ list.data.data[4].id  }}</h2>
27      <p>{{ list.data.data[4].description  }}</p>
28    </v-col>
29</v-card>
30
31  <div>
32    <v-pagination v-model="page" :length=10></v-pagination>
33  </div>
34</template>
35
36
37
38
39<script>
40
41
42import { ref } from 'vue'
43import { useRoute, onBeforeRouteUpdate } from 'vue-router'
44import axios from 'axios'
45
46
47
48
49async function getAPI(offset, perpage) {
50  const res = await axios.get("/api/pagination", {
51    params: {
52      offset: offset,
53      perpage: perpage
54    }
55  })
56  return res.data
57}
58
59export default {
60  name: 'Articles',
61  setup() {
62    const route = useRoute();
63    const perpage = 10;
64    let page = ref(0);
65    let offset = 5;
66    let list = ref([]);
67
68
69    // console.log(route);
70
71    if (null != route && route.query) {
72      page.value = (route.query.page) ? parseInt(route.query.page) : 1;
73    } else {
74      page.value = 1;
75    }
76
77    const setOffset = () => {
78
79      // console.log("page.value:" + page.value);
80      // console.log("perpage:" + perpage);
81      offset = (page.value > 0) ? (page.value - 1) * perpage : 0;
82
83    }
84
85    const load = async () => {
86      // try {
87      //   console.log(offset);
88      //   list.value = await getAPI(offset, perpage);
89      //   console.log(list.value);
90      // } catch (error) {
91      //   console.error(error) // catch any errors that may occur in getAPI
92      // }
93    }
94
95    setOffset()
96    load()
97
98    onBeforeRouteUpdate(async (to, from) => {
99      if (to.query.page !== from.query.page) {
100        page.value = to.query.page;
101        setOffset()
102        load()
103      }
104    })
105
106    return {
107      perpage,
108      page,
109      list
110    }
111
112    
113  },
114  watch: {
115    page: function (newValue, oldValue) {
116      // 現在のページ番号が変化した時に実行される処理
117      console.log(newValue)
118
119
120   
121
122      axios.post('/api/pagination',newValue)
123      .then(res =>  {
124           console.log(res);
125           this.list=res;
126        }).catch( error => { console.log(error); });
127
128     
129    }
130  }
131  
132}
133
134
135</script>

api.php

php
1
2<?php
3
4use Illuminate\Http\Request;
5use Illuminate\Support\Facades\Route;
6
7/*
8|--------------------------------------------------------------------------
9| API Routes
10|--------------------------------------------------------------------------
11|
12| Here is where you can register API routes for your application. These
13| routes are loaded by the RouteServiceProvider within a group which
14| is assigned the "api" middleware group. Enjoy building your API!
15|
16*/
17
18// Route::resource('tasks', TaskController::class)->only(['index']);
19
20// Route::get('/pagination',  'App\Http\Controllers\TaskController@show');
21Route::post('/pagination','App\Http\Controllers\TaskController@show');
22
23Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
24    return $request->user();
25});
26
27
28

TaskController.php

php
1
2<?php
3
4namespace App\Http\Controllers;
5
6use Illuminate\Http\Request;
7use App\Models\Task;
8use Illuminate\Pagination\Paginator;
9use App\Http\Controllers\Result;
10
11class TaskController extends Controller
12
13{
14
15
16    
17
18
19    public function show(Request $request){
20
21    file_put_contents('test.log',$request->input('newValue'));
22
23    $newValue = $request->input('newValue');
24
25    
26
27   
28
29    $res = Task::paginate(5, ['*'], 'page', 3);
30   
31    
32
33    return json_encode($res);
34
35    
36   
37    }
38}
39
40