Laravel controller passing value as Vue prop

Question

I currently have a Laravel route leading to the index function of my controller with a passed ID, where I return the id in a view

public function index($id)
{
    return view('progress')
        ->with('identifier', $id);
}

In the component loaded in said view I'm trying to access the identifier as a prop in my vue script

props: ['identifier'],
    methods: {
        getInformation() {
            this.$root.$emit('fetchEvent');
        },
    },
    mounted () {
        console.dir(this.identifier);
    }

However, my console says undefined and I can't figure out how to get the passed identifier as a prop.

What am I doing wrong?

update:

full template code

<template>
    <div>
        <div class="tab-content">                
                <item-component 
                    :web-identifier="identifier"
                ></item-component>
        </div>
    </div>

</template>


<script>
export default {
   props: ['identifier'],
    methods: {
        getInformation() {
            this.$root.$emit('fetchEvent');
        },
    },
    mounted () {
        console.dir(this.identifier);
    }
}
</script>

blade:

<div>
<task-detail-component></task-detail-component>
</div>

The bottom section of code is my progress template. I guess that's what I'm not sure of, I'm trying to make identifier accessible within the template through props — Geoff_S
where and how you're calling that component in blade template — Boussadjra Brahim

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2019-08-27T18:08:21

in blade template pass that data as follows :

<div>
<task-detail-component :identifier="{{$identifier}}"></task-detail-component>
</div>

Laravel controller passing value as Vue prop

2 Answers