How do I pass a route parameter to Vue.js from Laravel

Question

I have a route like this to fetch a post with the associated comment.

Route::get('/api/topics/{category_id}/{title}', function($category_id, $title){
    return App\Topic::with('comments')->where(compact('category_id','title'))->firstOrFail();
});

The thing is how can I pass a parameter variables to Vue.js?In this case "category_id" and "title",so Vue can fetch the post as well as the comments.

Below is my Vue instance which gives me this error:

main.js:11749Uncaught ReferenceError: category_id is not defined

Vue instance

new Vue({


el: '#comment',

methods: {

    fetchComment: function (category_id, title) {
        this.$http.get('/api/topics/' + category_id + '/' + title ,function (data) {
            this.$set('topics',data)
        })
    }


},
ready: function () {
    this.fetchComment(category_id, title)
}
});

method to show a certain post

public function show($category_id, $title)
{

$topic = Topic::where(compact('category_id','title'))->firstOrFail();

$comments = Comment::where('topic_id',$topic->id)->get();

return view('forums.category', compact('topic','comments'));
}

Ata · Accepted Answer · 2016-03-16 05:31:05Z

2

ForumsController.php

public function show($category_id, $title) {
    $topic = Topic::where('category_id', $category_id)
        ->where('title', $title)
        ->firstOrFail();

    return view('forums.category')
        ->with('topic', $topic);
}

Javascript

var category_id = '{{ $topic->cataegory_id }}';
var title       = '{{ $topic->title }}';

new Vue({
  el: '#comment',

  methods: {
    fetchComment: function(category_id, title) {
      this.$http.get('/api/topics/' + category_id + '/' + title, function(data) {
        this.$set('topics', data);
      })
    }


  },

  ready: function() {
    this.fetchComment(category_id, title);
  }
});

edited Mar 16, 2016 at 5:31

answered Mar 16, 2016 at 2:44

Ata

3121 silver badge7 bronze badges

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

16 Comments

shigg Over a year ago

Trying to fetch the parameter from the database through the listed route in the post

Ata Over a year ago

look this main.js:11749Uncaught ReferenceError: category_id is not defined, category_id not defined and you use in this.fetchComment(category_id, title), title not defeinded to

Ata Over a year ago

try to do declare category_id & title before you use in method, example var category_id = put_here_the_souce_of_category_id, and do for title to, can i see full code ?

shigg Over a year ago

does that mean the Vue instance is not able to fetch data from the api above?

shigg Over a year ago

for full code please take a look at this stackoverflow.com/questions/36003342/…

|

Collectives™ on Stack Overflow

How do I pass a route parameter to Vue.js from Laravel

1 Answer 1

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related