Vue Props Undefined (parsing props form laravel blade)

Question

I'm parsing props from laravel blade to vue component, usually i can make it work, but this time it's just not working at all.

web.php

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

Component.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>

When i'm accessing /catalog/Something, in console will be a warning like [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. But the props here "product-category-name" not "Something", "Something" is the value, i don't know why it throw an error like this and when i try to access this.productCategoryName it always undefined.

Digvijay Digvijay · Accepted Answer · 2020-07-13T16:33:43

The : will look for a variable's value. In your case, "something" is the value.

Either remove the :

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

Or add ' ' to the blade {{ }}

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

Vue Props Undefined (parsing props form laravel blade)

1 Answers