[Vuejs]-Get all values of custom input inside v-for vuejs

by

0👍

The issue I see in your code is, you are using only one variable "formInput" ( in case of Contact component ) and "inputVal" ( in case of Input component ) but you have number of input fields from where you need data right.

The simplest way to deal with these kind of cases is to create a datastructure and loop through that.

For eg.

// Contact component ( i am making it simple to make you understand the scenario )
<template>
    <div class="form container">
        <form v-on:submit.prevent="sendMail" method="post" class="d-flex row shadow bg-dark border-right border-dark">
            <h3 class="col-12">Contact me</h3>
            <!-- we are looping through our data structure and binding each inputVal to this input -->
            <input v-for="(input, i) in formInputs" :key="i" v-model="input.inputVal">
        </form>
    </div>
</template>

<script>
import Input from "../components/Input";
export default {
    name: "Contact",
    components: {Input},
    data() {
        return {
            formInputs: [
              {inputVal: ''},
              {inputVal: ''},
              {inputVal: ''},
            ],
        }
    },
    methods: {
        sendMail () {
            // You can extract the data from formInputs as per your need
        }
    }
}
</script>

Leave a comment