laravel - Vue.js/Laravel : pass category id to Vue. js 组件

Question

我正在使用 Vue.js与 Laravel并面临一个问题。我要通过类别id从 Blade 文件到 Vue.js组件作为 Prop 。但不知道什么是好的做法和正确的方法。
我已经定义了这样的路线:

Route::view('/categories/{category}/edit', 'edit')->name('categories.edit');

和我的 edit.blade.php文件是:

@extends('master')

@section('vue')
    <div id="app">
        <categories-edit :id=""></categories-edit>
    </div>
@endsection

Vue.js组件代码是:

<template>
    <div class="container py-5">
        <div class="row">
            <div class="col-lg-12">
                <div class="mb-3">
                    <label for="name" class="form-label">Name:</label>
                    <input type="text" v-model="formState.name" name="name" class="form-control" id="name" placeholder="Category Name" autocomplete="off">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
   name: 'CategoriesEdit',
   props: ['id'],
   data: function () {
       return {
           formState: {
               name: '',
               photo: ''
           }
       }
   },
    mounted() {
       
    },
    methods: {
      loadInitialData: function () {
          const self = this;
          axios.get(``).then(function (response) {
          }).catch(function (err) {

          });
      }
   }

}
</script>

当我在网络浏览器中输入 URL 时。我收到这个错误。 http://example.test/categories/1/edit输出:

Undefined variable $category

Answer 1

由于您使用的是 Route::view()您没有获取路由参数并将它们传递给 View 的传统方式。幸运的是，您总是可以在请求对象上获取这些信息，并且有一个 request()帮助 Blade 更容易意见。

<categories-edit :id="{{ request()->route('category') }}"></categories-edit>