adhik13th
3 months ago
263
1
Vue

input form always get empty value

Posted 3 months ago by adhik13th

I have a form using laravel vue js , this form is multiple input and sending array data . but on this store my input has error 500 like this

message: "SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'indukpencairan_id' cannot be null (SQL: insert into pencairan (indukpencairan_id, nama_barang, qtt, satuan, harga, harga_total, keterangan, status, updated_at, created_at) values (?, ?, ?, ?, ?, ?, ?, ?, 2020-07-07 03:36:32, 2020-07-07 03:36:32))"

all column in form not send a value . i think i have a mistake but i try to fix this and its didn't get fixed :( , it's my form and vue code

  <h1 class="title is-3  has-text-centered">FORM INPUT</h1>
              <div class="field">
                <button
                class="button is-success"
                type="button" @click="AddField"
                > + Add Colomn
                </button>
             </div>
          
                <div class="field" v-for="data in userData" :key="data.id">
                        <div class="field-body">
                            
                        <div class="field">
                        <label class="label">Nama Barang: </label>
                        <p class="control is-expanded">
                            <input 
                            type="text"
                            name="nama_barang"
                            id="nama_barang"
                            class="input"
                            v-model="data.nama_barang"
                            placeholder="nama barang">
                        </p>
                        </div>
                        
                            <div class="field">
                            <label class="label">Satuan: </label>
                            <p class="control is-expanded">
                                <input 
                                type="text"
                                name="satuan"
                                id="satuan"
                                class="input"
                                v-model="data.satuan"
                                placeholder="Satuan">
                            </p>
                            </div>
                           
                            <div class="field">
                             <label class="label">Quantity:</label>
                            <p class="control is-expanded">
                                <input 
                                type="number"
                                name="qtt"
                                id="qtt"
                                class="input"
                                v-model="data.qtt"
                                placeholder="Qtt" >
                            </p>
                            </div>
                            
                            <div class="field">
                            <label class="label">Harga:{{ data.harga | currency}}</label>
                                <p class="control is-expanded">
                                    <input class="input" 
                                    name="harga"
                                    type="number"
                                    id="harga"
                                    v-model="data.harga"
                                    placeholder="Harga">
                                </p>
                            </div>

                            <div class="field">
                            <label class="label">Harga Total:</label>
                                <p class="control is-expanded">
                                    {{(data.qtt * data.harga) | currency}}
                                </p>
                            </div>

                            
                            
                    </div>
                </div>

and it's my vue

  export default {
    data(){
        return{     
            count: 0,
                
            userData:[{
                indukpencairan_id:1,
                nama_barang:'',
                qtt:'',
                satuan:'',
                harga:'',
                harga_total:'',
                keterangan:'',
                status:'Aktif',
            }],
        }
    },
    
    components:{
       
    },
    props: {
            indukpencairan_id: Number,
        },
    methods:{
        AddField: function () {
             this.userData.push({ indukpencairan_id: '',nama_barang: ''  ,qtt: '' ,satuan: '',harga: '' ,harga_total: '',
             keterangan: '' ,status: 'Aktif',
            });
        },

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

i have a misunderstanding about this userData and data for my store procedure , can someone correct me ?? thankyou

Please sign in or create an account to participate in this conversation.