Vue.js/Laravel：将类别 ID 传递给 Vue.js 组件答案

【问题标题】：Vue.js/Laravel: pass category id to Vue.js componentVue.js/Laravel：将类别 ID 传递给 Vue.js 组件
【发布时间】：2021-08-23 16:10:57
【问题描述】：

我正在使用 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

【问题讨论】：

@IgorMoraru 当我在做<categories-edit :id="{{ $category->id }}"></categories-edit> 时，它给了我一个错误。未定义变量 $category.
$category 来自哪里？如果您打算从 Route 获取它，那么您应该这样做：Route::input("category")

标签： laravel vue.js

【解决方案1】：

由于您使用的是Route::view()，因此您没有获取路由参数并将它们传递给视图的传统方式。幸运的是，您始终可以在请求对象上获取这些信息，并且有一个 request() 帮助器可以更轻松地查看 Blade 视图。

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

【讨论】：