Vue.js + vue-router + axios + Laravel. Can't retrieve values by id - laravel

Question

Why can't get values via axios?
I get correct ID of tasks, can show it in Blade but can't get in Vue.
Where is mistake?
id = 4 - is id of task
When i try http://cosys.loc/api/task/4 - is ok, i get json of task with ID 4.
This is link for example: <router-link :to="{ name: 'TaskShow', params: { id: 4 }}">Show details</router-link>
TaskDetails.vue:
<template>
<div class="container-fluid my-3">
<h1>ID from URL: #{{ this.$route.params.id }}</h1>
<h2>taskId: {{ taskId }}</h2>
<p class="lead">{{ this.$route.tasks }}</p>
<ul>
<li>{{ tasks.id }}</li>
<li>{{ tasks.title }}</li>
<li>{{ tasks }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "TaskDetails",
data() {
return {
tasks: {},
taskId: this.$route.params.id,
loading: true,
errored: false,
}
},
mounted() {
axios
.get(`/api/task/${this.$route.params.id}`)
.then(response => (this.tasks = response.data.tasks), (console.log(`${this.$route.params.id}`)))
.catch(error => console.log(error))
.finally(() => (this.loading = false));
},
}
</script>
<style scoped>
</style>
When i open url http://cosys.loc/tasks/show/4 get values of tasks with ID 1.
Why, how to solve this?
Tnx,
Anton

Answer 1

I put together an example with two components and a router to show how to implement.
Router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
import Home from '#/components/stackoverflow/router-params-example/Home'
import Detail from '#/components/stackoverflow/router-params-example/Detail'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/detail/:id',
name: 'detail',
component: Detail,
props: true
}
]
export default new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
Home
<template>
<div class="parent">
<h4>Home</h4>
<div class="row">
<div class="col-md-6">
<router-link class="btn btn-primary" :to="{ name: 'detail', params: { id: detailId } }">Show Detail</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
detailId: 1
}
}
}
</script>
Detail
<template>
<div class="child">
<h4>Detail</h4>
<div class="row">
<div class="col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>USER NAME</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.username }}</td>
</tr>
</tbody>
</table>
<router-link class="btn btn-secondary" :to="{ name: 'home' }">Back</router-link>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: {
id: {
type: Number,
required: true
}
},
data() {
return {
user: {}
}
},
methods: {
getUser() {
axios.get('https://jsonplaceholder.typicode.com/users/' + this.id)
.then( response => this.user = response.data )
.catch( error => console.log(error) )
}
},
created() {
this.getUser();
}
}
</script>