且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用VueJ添加动态输入字段

更新时间:2023-12-06 11:18:52

您需要添加一个包含所有所需字段的模板.假设它们都是文本字段

You need to add a template that has all the fields you need. Let's assume they are all text-fields

<script>
export default {
    data() {
        return {
            formFields: [
                "passenger_name",
                "ticket_no",
                "flight_no",
                "departure_date",
                "sector",
            ]
            ...
        }
    }
}

然后,您现在可以将字段动态添加到表单中,如下所示:

Then you can now dynamically add the fields into the form like so:

<td v-for="(fieldName, pos) in formFields" :key="pos">
    <input v-model="form[fieldName]" size="40" type="text" :name="fieldName" class="table-control form-control" :class="{ 'is-invalid': form.errors.has(fieldName) }">
    <has-error :form="form" :field="fieldName"></has-error>
</td>