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

error is in Item.vue please edit your question and add this file code too — Mohammad Fanni
– Mohammad Fanni, Commented Jun 27, 2017 at 19:24

Mohammad Fanni · Accepted Answer · 2017-06-28 09:05:22Z

3

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();
  }

edited Jun 28, 2017 at 9:05

answered Jun 28, 2017 at 6:22

Mohammad Fanni

4,2033 gold badges31 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SpaceNet Over a year ago

thank you for your answer. My program is much better now without the error.

SpaceNet Over a year ago

But {{item}} in Item.vue has no data instead of I could get a data from database and could confirmed the data on console for axios.get( '/item/' + this.$route.params.asin ).then(function(response){ console.log(response.data); return self.item = response.data; });

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related