Using file and array in bootstrap vue

Question

I have the following code on a form

<template>
   <base-layout :layout-classes="layoutClasses">
      <div class="container mt-3">
         <div v-if="storing">
            <h3>Please wait....</h3>
         </div>
         <div class="content">
            <base-block rounded title="Create Center">
               <b-form @submit.prevent="AddForm" class="mb-5">
              <b-form-group label-cols-sm="2" label="English Name">
                <b-form-input v-model="name.en" class="form-control-alt" type="text" placeholder="English name"></b-form-input>
              </b-form-group>
              <b-form-group label-cols-sm="2" label="French Name">
                <b-form-input v-model="name.fr" class="form-control-alt" type="text" placeholder="French Name"></b-form-input>
              </b-form-group>
              <b-form-group label-cols-sm="2" label="Italian Name">
                <b-form-input class="form-control-alt" v-model="name.it" type="text" placeholder="Italian Name"></b-form-input>
              </b-form-group>
              <b-form-group label="Image" label-cols-sm="2">
                <b-form-file :state="Boolean(image)" plain v-model="image"></b-form-file>
              </b-form-group>
              <b-form-group label="" label-cols-sm="2">
                    <b-button type="submit" class="text-white" variant="dark">Submit</b-button>
                    <b-button type="reset" class="text-white" variant="danger" @click="ResetForm()">Reset</b-button>
              </b-form-group>
            </b-form>
            </base-block>
         </div>
      </div>
   </base-layout>
</template>
<script>
 export default {
        data () {
            return {
                name: [],
                image: null,
                storing: false,

        }
    },
    methods: {
        AddForm ()
            {
                this.submitted = true
                this.storing = true
                this.errors = {}
                var self = this
                axios.post('/form', this.form)
                .then(function(response){
                    const status = response.status;
                    self.$router.push('/forms')
                })
                .catch(err => {
                    if (status == 401) {
                        self.$router.push('/login')
                    }
                    Object.assign(this.errors, {}, err.response.data.errors)
                })
                .finally(() => {
                    this.storing = false
                })
            },
        
    }

 }
</script>

Name field should come in array but when I console this.form all the values are empty. What am I doing wrong here? How should I give name to the field if the field should inside a same name attribute? How does the input file work when it come to vue?

Answer 1

You don't have "form" in data object and input's v-model don't have any binding with form. So:

// update v-model of all inputs
<b-form-input v-model="form.name.en" class="form-control-alt" type="text" placeholder="English name"></b-form-input>

// add form to data object:
form: {
  name: {
   en: "",
   fr: ""
  },
  image: ""
}