从 vue 表中单击并保存到 Laravel 控制器时获取 ID

Question

我有一个可以打开模式的操作按钮。它会转到这个组件，用户将上传一张图片我目前无法解决的问题是获取我点击的 ID

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>

我目前正在研究它，我坚持了好几天 如何获取我点击的 ID 并将其保存到 laravel 控制器中

public function MobileBookingIssue(Request $request)
    {
        $mobileIssue = DB::table("booking_health_issues")
            ->where("id", '=', $request->id);
            
            return response()->json(["message" => "success"]);
    }
    

Answer 1

我不确定，但是我认为 id 需要在 data() 中返回，然后才可以使用