I have an action button that will open a modal. and it will go to this component and the user will upload an image the problem that that i currently unable to solve is fetching the ID that i've clicked on
Modal.vue
<template>
<section>
<div style="margin: 0 0 15px; text-align: left; padding: 10px 30px">
<div class="-checkbox-div">
<el-checkbox v-model="swim" class="-checkbox">
Swimming anytime soon
</el-checkbox>
<span v-if="swim" class="-upload-mc">
<el-link type="success" :underline="false" @click="uploadCert('Swimming')">
Upload medical certificate
<i class="el-icon-circle-check el-icon--right" v-if="checkIssue('Swimming')"></i>
</el-link>
</span>
</div>
<div class="-checkbox-div">
<el-checkbox v-model="below" class="-checkbox">
Below 18 years old ?
</el-checkbox>
<span v-if="below" class="-upload-mc">
<el-link type="success" :underline="false" @click="uploadCert('Below 18 years old')">
Upload medical certificate
<i class="el-icon-circle-check el-icon--right" v-if="checkIssue('Below 18 years old')"></i>
</el-link>
</span>
</div>
<el-dialog :visible.sync="waiverModal" width="30%" class="-waiver-modal" :append-to-body="true">
<WaiverModal v-if="waiverModal" :visible.sync="waiverModal" @upload="setIssueUrl" :form="form"></WaiverModal>
</el-dialog>
<div style="text-align: center; margin-top: 20px;">
<el-button type="primary" v-if="below + swim + noCon > 0"
@click="$emit('confirm', issues)">Confirm</el-button>
</div>
</section>
</template>
<script>
import {mapGetters} from "vuex";
import WaiverModal from "../../../../client/components/checkout/WaiverModal";
export default {
name: "Modal",
components:{
WaiverModal
},
data(){
return{
checkbox: false,
noCon: true,
swim: false,
below: false,
waiverModal: false,
issues: [],
form: {},
}
},
methods:{
setIssueUrl(arg){
this.issues = this.$helper.removeFromArray(this.issues, 'issue', arg.issue);
this.issues.push(arg);
},
removeIssue(arg){
this.issues = this.$helper.removeFromArray(this.issues, 'issue', arg);
},
uploadCert(arg){
let d = this.$helper.getFromArrayObj(this.issues, 'issue', arg);
this.form = Object.assign({}, d);
this.waiverModal = true;
},
checkIssue(arg){
let base = this.$helper.getFromArrayObj(this.issues, 'issue', arg);
if(!!base){
if(base.hasOwnProperty('url')){
if(!base.url == ''){
return true;
}
return false;
}else{
return false;
}
}
return false;
}
},
watch: {
noCon: function (v) {
if(v){
this.checkbox = false;
this.noCon = false;
this.swim = false;
this.below = false;
}
},
swim: function(v){
if(v){
this.noCon = false;
this.issues.push({
"issue" : "Swimming",
"url" : ""
})
}else{
this.removeIssue('Swimming');
}
},
below: function(v){
if(v){
this.noCon = false;
this.issues.push({
"issue" : "Below 18 years old",
"url" : ""
})
}else{
this.removeIssue('Below 18 years old');
}
}
}
}
</script>
im currently studying it and i stuck up for days how can i fetch the ID that i clicked and save it to laravel controller like this
public function MobileBookingIssue(Request $request)
{
$mobileIssue = DB::table("booking_health_issues")
->where("id", '=', $request->id);
return response()->json(["message" => "success"]);
}