gistfile1.txt

<template>
    <div>
        <div v-for="(parent, id) in form.text" :key="id">
            <template if="parent.type === 'item'">
                <div class="card mt-5">
                    <div class="card-body pt-0">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <input class="form-control" placeholder="Name" v-model="parent.name">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <input class="form-control" placeholder="Price" v-model="parent.price">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Image:</label>
                            <div class="form-group">
                                <div @click="handleClick('file-' + id)" class="btn btn-primary text-white">
                                    <i class="fa fa-picture-o"></i> Click
                                </div>
                                <input :id="'file-' + id" type="file" @change="handleUpload(parent)" accept="image/*" hidden/>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <div class="card">
            <div class="card-body">
                <button class="btn bg-maroon color-palette" @click="addParent('item')"><i class="fa fa-crown"></i> Block</button>
            </div>
        </div>
        <div class="card">
            <div class="card-footer">
                <button type="submit" class="btn btn-primary" @click="blockCreate">Create</button>
            </div>
        </div>
    </div>
</template>

<script>
    import Form from 'form-backend-validation';

    export default {
        name: "BlockCreate",
        data() {
            return {
                form: new Form({
                    test: '',
                    name: '',
                    text: [],
                    _method: 'PUT',
                }, {
                    resetOnSuccess: false,
                }),
            }
        },
        methods: {
            handleClick(inputId) {
                document.getElementById(inputId).click();
            },
            handleUpload(parent) {
                var input = event.target;
                if (input.files && input.files[0]) {
                    this.form.test = input.files[0];
                    parent.image = input.files[0];
                    this.updatePreview();
                }
            },
            addParent(type) {
                if (type === 'item') {
                    this.form.text.push({type: 'item', name: '', price: '', image: ''});
                }
            },
            blockCreate() {
                console.log(this.form.text);
                this.form.post(window.location.href)
                    .then(response => {
                        console.log(response);
                        if (response.status === 'success') {
                            this.$toast.success(response.message);
                        } else if (response.status === 'error') {
                            this.$toast.error(response.message);
                        }
                    })
                    .catch((error) => {
                        if (error.response) {
                            console.log(error.response.data);
                            console.log(error.response.status);
                            console.log(error.response.headers);
                        } else if (error.request) {
                            console.log(error.request);
                        } else {
                            console.log('Error', error.message);
                        }
                        console.log(error.config);
                    });
            },
        },
    }
</script>

<style scoped>

</style>