How to populate input select box Laravel vue js

Question

I have form input using Vue on my project , but in my input 1 field select box cannot record on my sending input ( always null) , another filed like tipe text , number its work , but only this select box cannot record on input

its my input

    // this field select cant record ( always give null ) , 

           <div class="field"> 
             <div class="select">

                <select name="anak_id">
                    <option v-for="(invent, id) in kod_rek" :key="id" :value="id">
                    {{ invent }}
                    </option>
                </select>
            </div>
             </div>

                // and this field work normally

                <div class="field">
                    <label for="kode_rekening">kode rekening</label>
                    <input
                            type="text"
                            id="kode_rekening"
                            class="input"
                            :value="userData.kode_rekening"
                            @input="userData.kode_rekening = $event.target.value"
                            >
                    <div v-if="errors && errors.kode_rekening" class="text-danger">{{ errors.kode_rekening[0] }}</div>
                </div>

and on this export default

 export default {
    data(){
        return{
            fields: {},
            errors: {},
            userData:{
                anak_id:'',
                kode_rekening:'',
                uraian:'',
                anggaran:'',
            },
             kod_rek:{},       

            isSubmited: true,
        }
    },

     created(){
            axios.get('/users/get_data_turunan_anak').then((res)=>{
                this.kod_rek = res.data
                //  console.log(res.data)
                }).catch((err) => {
                console.log(err)
            });

        }


      methods:{
        submited(){
            this.isSubmited = true;
        },
        submit() {
            this.errors = {};
            axios.post('/users/input_turunan_anak', this.userData).then(response => {
                window.location = response.data.redirect;
            }).catch(error => {
                if (error.response.status === 422) {
                this.errors = error.response.data.errors || {};
                }
            });
        },
    },

only my select box cant storing on this input , whats this problem and my network having error

message: "SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'anak_id' cannot be null (SQL: insert into turunan_anak (anak_id, kode_rekening, uraian, anggaran, updated_at, created_at)

Does this answer your question? How can I set selected option selected in vue.js 2? — D Malan
– D Malan, Commented Jun 8, 2020 at 6:33
i think its different problem , i dont know why my selected dont passing this value (id) — Adhik Mulat
– Adhik Mulat, Commented Jun 8, 2020 at 6:48

Neha Jain · Accepted Answer · 2020-06-08 06:47:10Z

1

Try using @change event for the select box.You can also use v-model for this use case. v-model directive will help you to create two-way data bindings.

answered Jun 8, 2020 at 6:47

Neha Jain

1268 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adhik Mulat Over a year ago

i still dont get it , i try like this <select v-model="kod_rek.id"> , but still didnt have Error and not passing the value

Adhik Mulat Over a year ago

Column 'anak_id' cannot be null -> this problem

Collectives™ on Stack Overflow

How to populate input select box Laravel vue js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related