Using file and array in bootstrap vue - vue.js

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: ""
}