输入vue Js外键答案

【问题标题】：Input vue Js foreign key输入vue Js外键
【发布时间】：2020-07-06 06:28:24
【问题描述】：

我首先在 vue js 中使用输入。这个输入有这样的结构

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

这个 induk_id 是另一个表上的外键，但我不知道如何在这个 vue 上传递这个 induk_id。我使用 laravel vue js，这是控制器和路由

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

laravel 刀片上的这个控制器我可以像 $pencairan->id 一样为这个 induk_id 传递，但是我如何在 vue 上传递这个？

这是我的路线

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

它是我的导出默认值

 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',
             });
              }
            
    },

我的问题是如何在 vue js 中检索 induk_id ？

【问题讨论】：

使用axios 使用你的api。

标签： laravel vue.js

【解决方案1】：

您的问题很不清楚，需要更好的解释。您的意思是如何在 axios 发布请求上传递'induk_id'。如果是这样的话，那就很容易了。

只要您想要执行操作，就可以在 vue 上调用提交函数并传递 induk_id 参数。

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

然后在方法中，接受参数并使用模板文字连接 ``

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 || {};
            }
        });
        }

就是这样，如果它是您正在寻找的东西。但我不确定你是否在问这个，只是我的假设。随意添加更多细节。

【讨论】：

【解决方案2】：

<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>

【讨论】：