adhik13th
3 months ago
178
0
Vue

How to create data binding with array input ( multiple input) on vue

Posted 3 months ago by adhik13th

I have form input using vue js and this input have button to add more colomn input this button . like this picture image . so on this single input i use v-model and its work , but on my new form this v-model and data binding didnt work . you can see my form like this :

on this new from , this v-model didnt work

  <script type="x-template" id="form-input">
         <div class="field">
                        <div class="field-body">
                  
                        <div class="field">
                        <label class="label">Nama Barang: </label>
                        <p class="control is-expanded">
                            <input 
                            type="text"
                            id="nama_barang"
                            class="input"
                           // v-model="userData.nama_barang" ---> if i add this v-model like this this form not showing , if i remove this its work , but i need v-model to store data
                            placeholder="nama barang">
                        </p>
                        </div>
                        
                            <div class="field">
                            <label class="label">Satuan: </label>
                            <p class="control is-expanded">
                                <input 
                                type="text"
                                id="satuan"
                                class="input"
                               // v-model="userData.satuan" ---> if i add this v-model like this this form not showing , if i remove this its work , but i need v-model to store data
                                 placeholder="Satuan">
                            </p>
                            </div>
                           
                            <div class="field">
                             <label class="label">Quantity:</label>
                            <p class="control is-expanded">
                                <input 
                                type="number"
                                id="qtt"
                                class="input"
                                //v-model="userData.qtt" ---> if i add this v-model like this this form not showing , if i remove this its work , but i need v-model to store data
                                placeholder="Qtt" >
                            </p>
                            </div>
                            
                            <div class="field">
                            <label class="label">Harga:</label>
                                <p class="control is-expanded">
                                    <input class="input" 
                                    type="number"
                                    id="harga"
                                    //v-model="userData.harga" ---> if i add this v-model like this this form not showing , if i remove this its work , but i need v-model to store data
                                    placeholder="Harga">
                                </p>
                            </div>

                            <div class="field">
                            <label class="label">Harga Total:</label>
                                <p class="control is-expanded">
                                    {{(userData.qtt * userData.harga) | currency}} // its didnt work because this v-model didnt work
                                </p>
                            </div>
                            
                    </div>
                </div>

and its my export default

 export default {
    data(){
        return{
            fields: [],
            count: 0,
            userData:[{
                rek_id:'',
                tgl_pengajuan:'',
                suplier_id:'',
                status:'Aktif',
            }],
            rek:{},
            suplier:{},
            fields: [],
            count: 0,

        }
    },
    
    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 || {};
                }
            });
            },
        addFormElement: function(type) {
            this.fields.push({
                'type': type,
                id: this.count++
              });
            },
            
    },

so how this v-model on new form can work like one single form ? this v-model only work on only first form

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