获取 v-for vuejs 中自定义输入的所有值

Question

我创建了一个 vuejs 自定义输入，我想通过在自定义输入中使用道具来动态显示输入。我没有在这里展示它们，因为它太长了。

通过单击提交按钮，这也是自定义输入的一部分，我希望能够获取每个输入的值，但由于某种原因，我只能获取最后一个输入的值。 我做错了什么？

自定义输入：

<template>
    <div class="form-input">
        <label :label="label" :for="name" v-if="label && type !='submit' ">{{label}} <span v-if="required">*</span></label>
        <a v-if="multiple" href="#" class="btn">Upload</a>
        <input v-model="inputVal" :multiple="multiple" v-if="type != 'textarea' && type != 'submit'" class="form-control" :required="required" :class="classes" :type="type" :name="name" :placeholder="placeHolder">
        <textarea v-model="inputVal" :multiple="multiple" v-else-if="type != 'submit'" class="form-control" :required="required" :class="classes" :type="type" :name="name" :placeholder="placeHolder"></textarea>
        <button :multiple="multiple" :name="name" v-else type="submit">{{label}}</button>
    </div>
</template>
<script>
export default {
    name: "Input",
    data () {
        return {
            inputVal: null
        }
    },
    watch: {
        inputVal: {
            handler: function(newValue, oldValue) {
                this.$emit('input', newValue);
            },
            deep: true,
        }
    }
}
</script>

使用自定义输入的表单：

<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>
            <Input v-model="formInput" v-for="input in inputs"  v-bind:key="input.name" :label="input.label" :multiple="input.multiple" :type="input.type" :name="input.name" :class="input.classes" :required="input.required"></Input>
        </form>
    </div>
</template>
<script>
import Input from "../components/Input";
export default {
    name: "Contact",
    components: {Input},
    data() {
        return {
            formInput: null,
        }
    },
    methods: {
        sendMail () {
            console.log(this.formInput);
        }
    }
}
</script>

Answer 1

我在您的代码中看到的问题是，您只使用了一个变量“formInput”（在 Contact 组件的情况下）和“inputVal”（在 Input 组件的情况下），但是您需要的输入字段数量数据正确。

处理这类情况的最简单方法是创建一个数据结构并循环遍历它。

例如。

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