在 bootstrap vue 中使用文件和数组

Question

我在表单上有以下代码

<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>

名称字段应该出现在数组中，但是当我控制 this.form 时，所有值都是空的。我在这里做错了什么？如果字段应该在同一个名称属性中，我应该如何给字段命名？输入文件在vue中是如何工作的？

Answer 1

您在数据对象中没有“表单”，输入的 v-model 与表单没有任何绑定。所以：

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

在 bootstrap vue 中使用文件和数组

Using file and array in bootstrap vue

vue.js

bootstrap-vue