Vue.js/Laravel：将类别 id 传递给 Vue.js 组件

Question

我使用的是Vue.js与Laravel和面临的一个问题。我想将类别id从刀片文件传递给Vue.js组件作为道具。但不知道什么是好的做法和正确的方法。

我已经定义了这样的路线：

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()您没有获取路线参数并将其传递给视图的传统方法。幸运的是，您始终可以在请求对象上获取这些内容，并且有一个request()帮助器可以更轻松地获取Blade视图。

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