javascript - 在 vue 应用程序中从多个输入创建单个数组

Question

我有一个 vue 应用程序，它有一个简单的表单部分，例如这两个输入:

            <div class=" form-group col-lg-6">
                <label>Name</label>
                <input v-model="newUserName" class="form-control" type="text" name="newUserName">
            </div>
            <div class=" form-group col-lg-6">
                <label>Email</label>
                <input v-model="newUserEmail" class="form-control" type="text" name="newUserEmail">
            </div>

因此，我将它们设置为自己的 v 模型，当我在提交中转储这些模型时，它们确实分别显示了正确的输入值。问题是，我想使用 array.push 或类似的东西，这样，当点击提交函数时，它将它们推送到单个“详细信息”数组中。

因此，对于下面的示例，我想将名称和电子邮件推送到详细信息数组，并仅在控制台中显示具有这两个值的数组

    data() {
    return {
        details: [],
        newUserName:'',
        newUserEmail: '',
    }
},
methods: {
    showDetails() {

        let data = {
            details: this.details
        };
        console.log(data);
    }
}

Answer 1

好吧，你可以将它们推送到数组中。单击提交按钮时，您可以调用一些方法 submit() 例如:

submit() {
this.details.push(this.newUserName)
this.details.push(this.newUserEmail)

console.log(this.details)
}

如果您想在每次提交时重置它，只需在方法的开头添加 this.details = []