Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I have a route in laravel which I pass an id and it returns the data. This worked fine when I was using: <a href="{{route(route.name), $education->id}}>
However I'm using a component, I have a button when clicked shows a modal
Blade
@foreach($educations as $education)
<div class="row">
<div class="col-md-3">
<p>{{ $education->start->format('m/d/Y') }} - {{ $education->end->format('m/d/Y') }}</p>
</div>
<div class="col-md-7">
<p>{{ $education->qualification_type }} - {{ $education->field_of_study }}</p>
<p>{{ $education->school }}</p>
</div>
<div class="col-md-1 col-md-offset-1">
<button class="cis-btn-blank cis-btn-profile" :href="href" @click="showUpdateTalentEducation = true; noScroll = true;" >
<i class="fa fa-2x fa-pencil" aria-hidden="true"></i>
</button>
<a href=""><i class="fa fa-2x fa-times" aria-hidden="true"></i></a>
</div>
</div>
@endforeach
How can I pass the id from the button to the component and in turn return the data from the database ready to be updated.
would I have to add a computed property to the vue component?
maybe this can help you. you can pass name educationId
<button class="cis-btn-blank cis-btn-profile" educationId="{{$education->id}}" :href="href" @click="showUpdateTalentEducation = true; noScroll = true;" >
after in component define props. when you post data include education Id
<script>
export default{
props:["educationId"],
methods:{
showUpdateTalentEducation(){
axios.get('/route/'+this.educationId)
}
}
}
</script>
Ok I've followed this and its still not working correctly. The button works fine and is getting the correct id. The actual component doesn't get the data though. Even if I just call the Id like so:
<template>
<div class="card">
<div class="card-body">
<slot></slot>
<p>This is the id {{ educationId }}</p>
</div>
</template>
<script>
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
export default {
data () {
return {
date: null,
name: null,
className: null,
}
},
mounted () {
this.name = 'dob',
this.className = 'form-control'
},
components: {
flatPickr
},
props:['educationId'],
methods:{
showUpdateTalentEducation(){
axios.get('/talent/educationUpdate/'+this.educationId)
}
}
}
</script>
It still doesn't retrieve the data sent form the button.
Just to add I've tried putting two properties onto the button and the modal component its self. I added title and educationId and called them simply within the component using
<p>{{ title }}</p>
and
<p>{{ educationId }}</p>
and added them to the props. The title displays only when I put it directly on the component like so:
<modal title="something" educationId=" {{$education->id}}></modal>
The educationId doesn't display within the component but when I inspect the modal element the id is being called on the but doesn't get any further. Im lost as to why the title worked but the educationId doesn't.
Anyway I thought id share just incase it helps with any ideas. Thanks again @rin4ik for your help.
@Greggus here you forgot closing quotes
<modal title="something" educationId=" {{$education->id}}></modal>
try please with :
<modal title="something" :educationId="{{$education->id}}"></modal>
Sorry I mistyped that, I should of copied it directly from my app. In the app it is the same as
<modal title="something" :educationId="{{$education->id}}"></modal>
try this also. everything seems correct :(
<modal title="something" educationId="{{$education->id}}"></modal>
props: {
educationId : null
},
Please or to participate in this conversation.