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
– Geoff_S, Commented Aug 27, 2019 at 17:57
where and how you're calling that component in blade template — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 27, 2019 at 18:02

Boussadjra Brahim · Accepted Answer · 2019-08-27 18:15:07Z

2

in blade template pass that data as follows :

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

edited Aug 27, 2019 at 18:15

answered Aug 27, 2019 at 18:08

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Geoff_S Over a year ago

Ok, so is there a reason why my console portion shows undefined?

Boussadjra Brahim Over a year ago

or try <task-detail-component :identifier="{{$identifier}}"></task-detail-component> with $identifier

Geoff_S Over a year ago

on building I get a compile error for unexpected token {

Jorge Rodríguez Over a year ago

It is. Blade view injected variables are not available to the browser unless you explicitly bind them that way.

Geoff_S Over a year ago

I see now, that got it I believe. Thanks!

Joseph · Accepted Answer · 2019-08-28 00:30:51Z

0

in your template where you need to pass your identifier it will be like this

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

edited Aug 28, 2019 at 0:30

answered Aug 27, 2019 at 18:04

Joseph

6,3273 gold badges24 silver badges51 bronze badges

4 Comments

Geoff_S Over a year ago

ok I see, so why is the console printing undefined where I'm trying to show it in the console?

Joseph Over a year ago

did you make sure that you pass the identifier variable to view that contains this component?

Geoff_S Over a year ago

You can see where I;m passing it to the view in my controller above

Joseph Over a year ago

try to make it as api and fetch it in your component from ajax with axios

Collectives™ on Stack Overflow

Laravel controller passing value as Vue prop

2 Answers 2

5 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Related