Step2.vue

<template>
    <v-container class="grey lighten-5">
        <v-subheader>
            <b>Step 2:</b> Map Fields
            <br>
            <div class="text-subtitle-2 text-left ma-2">Map the fields in your csv to Autopilot's fields.</div>
        </v-subheader>
        <form action="" method="POST" @submit="sendMappingField">
            <v-row no-gutters>
                <v-col sm="12">
                    <div class="text-black">Found {{ totalRows }} contacts in:</div><br/>
                    <v-chip
                        class="ma-2"
                        color="green"
                        label
                        text-color="white">
                        <v-icon left>mdi-label</v-icon>
                        {{ fileName }}
                    </v-chip>
                    <a href="/import">Upload a different file</a>
                </v-col>
            </v-row>
            <v-row no-gutters>
                <v-col sm="12">
                    <div>Map your fields to Autopilot's fields:</div>
                    <br />
                    <v-row>
                        <v-col sm="4">CSV Field</v-col>
                        <v-col sm="4">Autopilot Field</v-col>
                        <v-col sm="4">&nbsp;</v-col>
                        <v-col sm="4">&nbsp;</v-col>
                    </v-row>
                    <v-row v-for="(item, index) in columns" :key="index">
                        <v-col sm="4">{{ item }}</v-col>
                        <v-col sm="4">
                            <v-select :name="item" :ref="item" :items="internalColums" label="Choose an option" solo
                            @change="onSelected($event, item, `input-${index}`)"></v-select>
                            <v-row :id="`input-${index}`" :class="{'d-none': inputs[item] != 'Add an option'}">
                                <v-col sm="6">
                                    <v-text-field label="Key" outlined @change="onInputKey($event, item)"></v-text-field>
                                </v-col>
                                <v-col sm="6">
                                    <v-select :items="types" label="Choose an option" solo @change="onInputType($event, item)"></v-select>
                                </v-col>
                            </v-row>
                        </v-col>

                        <v-col sm="4">&nbsp;</v-col>
                        <v-col sm="4">&nbsp;</v-col>
                    </v-row>
                </v-col>
            </v-row>
            <v-row no-gutters>
                <v-col sm="12">
                        <v-divider></v-divider>
                        <v-btn color="primary" type="submit">Continue</v-btn>
                        <v-btn text>Cancel</v-btn>
                </v-col>
            </v-row>
        </form>
    </v-container>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import axios from 'axios';

@Component
export default class Step2 extends Vue {
    @Prop() fileName!:string;
    @Prop() totalRows!:number;
    @Prop() columns!: string[];
    inputs = {};
    fakeColumns = ["first_name", "last_name", "email", "restaurant_name"];
    types = ["text", "number", "boolean", "date"];
    private coincidences: object = {
        "First Name": ["first_name", "f_name", "fname", "fn", "First_Name", "FirstName"],
        "Last Name": ["last_name", "l_name","lname", "ln", "Last_Name", "LastName"],
        "Email": ["email", "mail", "e-mail", "Email", "E-mail", "E-Mail"],
        "Phone": ["phone", "telephone", "Phone", "Telephone", "tel"],
        "Sticky Phone": ["sticky_phone", "s_phone", "sphone", "Sticky_Phone", "StickyPhone", "Stickyphone"]
    };
    private internalColums = ["First Name", "Last Name", "Email", "Phone", "Sticky Phone", "Add an option"];

    async mounted() {
        const fileName = localStorage.getItem('file') || "";
        const resp = await axios.get( `http://localhost:8000/api/v1/file/${fileName}`)
            .catch(function() {
                console.log('FAILURE!!');
            });
        // console.log('SUCCESS!!', (resp as any).data.data);
        this.fileName = fileName;
        this.totalRows = +(resp as any).data.data.total;
        this.columns = (resp as any).data.data.columns;
        // localStorage.setItem('file', (resp as any).data.data.file);
        for(const item of this.columns) {
            this.inputs[item] = "";
        }
    }
    sendMappingField(evt: any) {
        evt.preventDefault();
        // e.submit();
        this.$emit('input', 1);
    }

    onSelected(evt: any, select:any, elref: any) {
        if (evt == "Add an option") {
            (this.$refs[select] as Element).classList.add("d-none");
            (this.$refs[select] as any).class = "d-none";
            (document.getElementById(elref) as any).classList.remove("d-none");
        }
        console.log(select);
        this.inputs[select] = evt;
        console.log(this.inputs);
        console.log(document.getElementById(elref));
    }

    onInputKey(evt: any, id: any) {
        this.inputs[id] = {[evt]: ""};
        console.log(this.inputs);
    }

    onInputType(evt: any, id: any) {
        for (const key of Object.keys(this.inputs[id])) {
            this.inputs[id][key] = evt;
        }
        console.log(this.inputs);
    }
}

</script>