<template>
    <form @submit.prevent="submit">

        <!-- Display a global message if there is any errors -->
        <div class="alert alert-danger" v-if="form.errors.any()" v-cloak>
            Please check the form and try again!
        </div>

        <!-- Apply custom classes when a field has an error -->
        <div :class="{ 'has-error': form.errors.has('name') }">

            <!-- No need to attach your component data to the form object -->
            <input type="text" v-model="user.name">

            <!-- Display the error message for a specific field -->
            <div class="error" v-show="form.errors.has('name')" v-text="form.errors.get('name')"></div>

            <!-- Or display all error messages for specific field -->
            <div v-for="(error, key) in form.errors.getAll('name')" :key="key" v-text="error"></div>
            
            <!-- Pass an instance of File to your model to support file uploads -->
            <input type="file" @change="user.photo = $event.target.files[0]" accept="image/jpeg">

            <!-- Disable buttons using form.isPending -->
            <button type="submit" :disabled="form.isPending">Submit</button>

            <!-- Get upload progress percentage using form.progress -->
            <div class="progress-bar">
                <div :style="{width: form.progress + '%'}"></div>
            </div>
        </div>
    </form>
</template>

<script>
import Form from 'form-object';

export default {
    data() {
        return {
            user: {name: 'Sahib', photo: null},
            form: new Form()
        }
    },

    methods: {
        submit() {
            this.form.submit('post', '/users', this.user).then(data => {
                // This is the data returned from your server.
                console.log(data);
            }).catch(error => {
                // Handle request errors.
            });
        }
    }
}
</script>

<template>
    <div>
        <div v-for="(color, i) in product.colors">
            <input type="text" v-model="product.colors[i]" />
            <div v-show="form.errors.has(`colors.${i}`)" v-text="form.errors.get(`colors.${i}`)"></div>
        </div>
        
        <div v-for="(photo, i) in product.photos">
            <input type="file" @change="product.photos[i] = $event.target.files[0]" accept="image/jpeg" />
            <div v-show="form.errors.has(`photos.${i}`)" v-text="form.errors.get(`photos.${i}`)"></div>
        </div>
    </div>
</template>

<script>
import Form from 'form-object';

export default {
    data() {
        return {
            form: new Form(),
            // Fill array as you need, I use null to simplify this example.
            product: {
                colors: [null, null],
                photos: [null, null]
            }
        };
    },

    methods: {
        async submit() {
            await this.form.post('/arrays-support', this.product);
        }
    }
}
</script>