Input vue Js foreign key

Question

I am first using input in vue js . this input have structure like this

                induk_id:'',
                nama_barang:'',
                qtt:'',
                satuan:'',
                harga:'',
                harga_total:'',
                keterangan:'',
                status:'Aktif',

this induk_id is foreign key on another table , but i dont know how to pass this induk_id on this vue . i use laravel vue js and this is controller and route

public function input_detail($id)
{
    $pencairan = IndukPencairan::findOrFail($id);
    if (!$pencairan)
    abort(404);
    
    return view('pengadaan.inputdetail',['pencairan' => $pencairan]);
}

this controller on laravel blade i can pass like $pencairan->id for this induk_id , but how i can pass this on vue ?

and its my route

 Route::get('input_detail/{id}', 'PengadaanController@input_detail')->name('input_detail');

and its my export default

 export default {
    data(){
        return{     
            count: 0,
            userData:[{
                induk_id:'',
                nama_barang:'',
                qtt:'',
                satuan:'',
                harga:'',
                harga_total:'',
                keterangan:'',
                status:'Aktif',
            }],
        }
    },
    
    components:{
       
    },
    methods:{
        submit() {
            this.errors = {};
            axios.post('/pengadaan/store_induk_pencairan', this.userData).then(response => {
                window.location = response.data.redirect;
            }).catch(error => {
                if (error.response.status === 422) {
                this.errors = error.response.data.errors || {};
                }
            });
            },
         AddField: function () {
             this.userData.push({ induk_id: '',nama_barang: ''  ,qtt: '' ,satuan: '',harga: '' ,harga_total: '',
             keterangan: '' ,status: 'Aktif',
             });
              }
            
    },

my question is how i retrieve induk_id in vue js ?

Answer 1

<template>
  <div>{{ response_data }}</div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      formdata: {
        induk_id: "",
        nama_barang: "",
        qtt: "",
        satuan: "",
        harga: "",
        harga_total: "",
        keterangan: "",
        status: "Aktif",
      },

      response_data: null,
    };
  },
  methods: {
    submit() {
      axios
        .get(`input_detail/${this.formdata.induk_id}`)
        .then((response) => {
          this.response_data = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>

Answer 2

Your question is quite unclear, it needs a better explanation. Do you mean how to pass the 'induk_id' on axios post request. If that's the case, it's quite easy.

Call the submit function on vue passing the induk_id paramater whenever you want to action to be performed.

<button @click="submit(induk_id)"> Submit </button> 

Then in methods, accept the parameter and concat using template literals ``

submit(id) {
        this.errors = {};
        axios.post(`/pengadaan/store_induk_pencairan/${id}`, this.userData).then(response => {
            window.location = response.data.redirect;
        }).catch(error => {
            if (error.response.status === 422) {
            this.errors = error.response.data.errors || {};
            }
        });
        }

That's it, if its something you are looking for. But I'm not sure if you were asking about this, just my assumptions. Feel free to add more details.