如何从 Laravel 将路由参数传递给 Vue.js

Question

我有这样的路线来获取带有相关评论的帖子。

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

问题是如何将参数变量传递给 Vue.js？在这种情况下，“category_id”和“title”，因此 Vue 可以获取帖子以及 cmets。

下面是我的 Vue 实例，它给了我这个错误：

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

Vue 实例

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

显示某个帖子的方法

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

Answer 1

论坛控制器.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);
  }
});