Vue Props Undefined (синтаксический анализ формы laravel blade)

Question

Я разбираю пропсы с laravel blade на vue компонент, обычно я могу заставить его работать, но на этот раз он просто не работает вообще.

web.

Route::get('/catalog/{product_category_name}', function ($product_category_name) {
    return view('shop', compact('product_category_name'));
});

shop.blade. php

@extends('layouts.base')
@section('content')
<catalog-component :product-category-name="{{$product_category_name}}">
</catalog-component>
@endsection

Компонент. vue

<script>
    export default {
        props: ["productCategoryName"],
        data(){
            return{
                Dewasa: '',
                product: {
                    id: '',
                    brand_id: '',
                    name: '',
                    description: '',
                    slug_name: '',
                },
                uri:'/resource/catalog/' + this.productCategoryName,
                products: [],
                products_key_using_id: [],
                error: {},
            }
        },
    }
</script>

Когда я получаю доступ к /catalog/Something, в консоли будет предупреждение типа [Vue warn]: Property or method "Something" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. Но реквизит здесь «product-category-name», а не «Something», «Something» - это значение, я не знаю, почему он выдает такую ​​ошибку, и когда я пытаюсь получить доступ к this.productCategoryName, оно всегда не определено.

Answer 1

: будет искать значение переменной. В вашем случае "что-то" является значением.

Либо удалите :

<catalog-component product-category-name="{{ $product_category_name }}"></catalog-component>

Или добавьте '' к клинку {{}}

<catalog-component :product-category-name="'{{ $product_category_name }}'"></catalog-component>