时间戳

首页 > 解决方案 > 如何在 vuejs (vuetify) 中动态创建输入字段

vue.js - 如何在 vuejs (vuetify) 中动态创建输入字段

问题描述

我是 vuejs 的新手。我想通过单击使用 vuetify 的按钮来动态创建输入字段。我的实现尝试如下所示，并逐行注释以显示我试图实现的目标。我有办法做到这一点吗？欢迎任何建议。

<template>
    <v-container>
        <v-row>
            <v-col cols="12" sm="12">
                <v-btn color="success">Add Input</v-btn>
            </v-col>
            <v-col cols="12" sm="12" ref="mount">
                <!-- inputs fields are appended here -->
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
    export default {
        data() {
            return {
                items: {},
            };
        },
        methods: {
            addField() {
                // create element
                let textField = document.createElement("v-text-field");
                // add it to the data property
                this.$data.items["firstName"] = "";
                // add the vmodel attribute to the element
                textField.setAttribute("v-model", "firstName");
                // finally mount it in the templates
                this.$refs.mount.appendChild(textField);
            },
        },
    };
</script>

标签： vue.jsvuejs2vuetify.js

解决方案

您应该使用这样的对象数组basic: [{ name: "", time: "" }]。然后，您可以使用循环将输入字段绑定到这些属性并将项目添加到该数组。你可以在这里看到一个工作示例

<div v-for="item in basic" :key="item.id">
    <button @click="addRow">Add row</button>
    <input type="text" v-model="item.name" />
    <input type="text" v-model="item.time" />
    {{ item.name }} - {{ item.time }}
</div>

data () {
    return {
        id: 1,
        basic: [{ name: "", time: "" }]
    };
}

addRow () {
    console.log("added");

    this.id += 1;
    this.basic.push({
        name: "",
        time: ""
    });
}

推荐阅读