How can I get the data with using url parameter in a Laravel application using VueJS and Vue-router

Question

I'm making an application with a list page and the detail page(Item.vue) simply. From the list, a user can go to the detail page with the url like localhost/item/12345. But I cannot make the logic for my Laravel application with VueJS and Vue-router.

Laravel 5.4,

node 6.11, npm 3.10.10,

axios 0.15.3, vue 2.3.4, vue-router 2.6.0

My code is like below

Example.vue (using as a list page)

<template>
 <p class="card-text"><router-link v-bind:to="{ name:'item', params:{ id: item.id }}">
  {{ item.title }}</router-link>
 </p>
</template>
<script>
 export default {
  data(){
   return{
    $item:[]
   }
  },
  mounted(){
   var self = this;
   axios.get('/item').then(function(response){
    return self.item = response.data;
   });
  }
 }
</script>

Item.vue

<template>
 <p class="card-text">{{item.title}}</p>
 <p class="card-text">{{item.content}}</p>
</template>
<script>
 export default {
  data(){
   return{
    $item:[]
   }
  },
  mounted(){
   var self = this;
   axios.get('/item'+this.$route.params.slug
   ).then(function(response){
    return self.item = response.data;
   });
  }
 }
</script>

routes.js

import VueRouter from 'vue-router';
var routes=[
 {
  name:'item',
  path:'/item/:id',
  component:require('./components/Item.vue'),
  props: true
 }
];
export default new VueRouter({
 routes
});

routes/web.js

Route::resource('item','ItemController');
Route::resource('item/{id}', 'ItemController@show');

ItemController

<?php
 namespace App\Http\Controllers;
 use Illuminate\Http\Request;
 use App\Items;

 class ItemController extends Controller
 {
  public function index()
  {
   return Items::all();
  }
  public function show($id)
  {
   $item = Items::where('id', '=', $id)->firstOrFail();
   return view('item.show', compact('item'));
  }
 }

app.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './routes.js';

require('./bootstrap');
window.Vue = require('vue');
Vue.use(VueRouter);

Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
 router,
 el: '#app'
});

the warning message is shown for the list page

[Vue warn]: Property or method "item" is not defined on the instance but referenced 
during render. Make sure to declare reactive data properties in the data option.
found in
---> <Item> at /var/www/laravel/resources/assets/js/components/Item.vue
 <Root>

the error message for the detail page

Error: Request failed with status code 500

Answer 1

First of all, if you check errors:

Property or method "item" is not defined

and check item in your data code:

  data(){
   return{
    $item:[]
   }
  },

you define item with $ but you use item variable without $

In Javascript you dont need to define variable with dollar symbol

change it to item in both item.vue and example.vue:

  data(){
   return{
    item:[]
   }
  },

Secondly: check axios code:

axios.get('/item'+this.$route.params.slug

it means call route /itemslug with get method but I dont see a route define like this in router but if you put / after item like this:

axios.get('/item/'+this.$route.params.slug

it will change your get url to : /item/slug

but you dont using slug in your controller to return view you sould change your controller to :

  public function show($slug)
  {
   $item = Items::where('slug', '=', $slug)->firstOrFail();
   return view('item.show', compact('item'));
  }

or change this.$route.params.slug to this.$route.params.id

on the other hand in your controller

  public function show($id)
  {
   $item = Items::where('id', '=', $id)->firstOrFail();
   return view('item.show', compact('item'));
  }

as you see show method return collection to item.show view, if you want to get data directly with axios you shouldnd return view instead of you can do this

  public function show($id)
  {
   return $item = Items::where('id', '=', $id)->firstOrFail();
  }