如何在vue中将表单提交到数组并清除输入
在Vue中，可以通过以下步骤将表单提交到数组并清除输入：
- 首先，在Vue组件的data选项中定义一个空数组，用于存储表单提交的数据。例如，可以将其命名为
formArray。
data() {
return {
formArray: []
}
}- 在模板中，使用
v-model指令将表单元素与Vue实例中的数据进行双向绑定。确保每个表单元素都有一个唯一的key属性，以便Vue能够正确地跟踪每个表单项。
<form>
<input type="text" v-model="formArray[key].name" :key="key" />
<input type="text" v-model="formArray[key].email" :key="key" />
<!-- 其他表单元素 -->
</form>- 在提交表单时，创建一个新的对象，将表单数据存储在其中，并将该对象推送到
formArray数组中。
methods: {
submitForm() {
const formData = {
name: this.formArray[key].name,
email: this.formArray[key].email,
// 其他表单数据
};
this.formArray.push(formData);
this.resetForm();
},
resetForm() {
// 清除表单输入
this.formArray[key].name = '';
this.formArray[key].email = '';
// 其他表单元素的清除
}
}- 最后，在模板中添加一个提交按钮，并绑定
submitForm方法。
<form>
<!-- 表单元素 -->
<button @click="submitForm">提交</button>
</form>这样，当用户点击提交按钮时，表单数据将被添加到formArray数组中，并且输入框的值将被清除。
对于Vue开发中的表单提交和数据处理，腾讯云提供了云开发（CloudBase）服务，它是一套全栈云开发平台，提供了前端开发、后端开发、数据库、存储等一体化解决方案。您可以通过腾讯云云开发来构建和部署Vue应用，并使用其提供的云函数和数据库功能来处理表单提交和数据存储。
了解更多关于腾讯云云开发的信息，请访问：腾讯云云开发
相关·内容
1回答
如何使userInfo.value.email在以下Vue3组件中具有反应性：
<script setup>
import { useUserStore } from '../store/user';
import { storeToRefs } from "pinia";
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const page = {
formData: {
email: u
浏览 8提问于2022-08-04得票数 1
1回答
我在vuejs Modal.I中创建了一个表单。我想将数据提交到数据库。数据库表中的所有列都在varchar中。但是当我试图从表单创建'formdata‘对象时，'phoneNumber’和'password‘抛出了一个未定义的错误。我不明白为什么这两个字段会产生问题。代码如下所示： <form v-on:submit="submitFormData">
<label for="firstname">First Name</label>
<
浏览 17提问于2020-01-04得票数 0
回答已采纳
1回答
我正在做一个静态网站，但我需要联系表单，它应该将表单数据发送到电子邮件，使用nuxtjs 3，尝试使用useFetch()，也尝试使用axios。
这是我有的东西
Contact Vue模板
<template>
<section id="ng-ctt" class="ng-ctt">
<div class="ng-ct">
<div class="ng-fx">
<div class="ng-fx6-m">
浏览 9提问于2022-04-20得票数 2
回答已采纳
3回答
我有一个从表单发布数据的vue组件，它工作得很好，但是，我需要在提交表单后将“选定”属性重置为空值，我该怎么做呢？下面是blade.php文件：
<form action="{{ url('/cart') }}" method="POST" class="side-by-side reset">
{{ csrf_field() }}
{{-- form for my super not working with options vue component --}}
&l
浏览 3提问于2017-09-07得票数 2
回答已采纳
3回答
具有更新输入值的vue提交表单
、、、、
我有一个简单的隐藏形式
<template>
<form ref="form" method="POST" action="https://target.com/post" accept-charset="utf-8">
<input type="hidden" name="data" :value="myData"/>
<input type="hidden" name="signature
浏览 9提问于2021-05-11得票数 1
回答已采纳
1回答
我在VueJS中有一个简单的表单，希望有一个表单字段的计算属性。在将表单提交给服务器之前，我希望计算计算属性为用户输入数据，然后将其保存为数据属性。
<form>
<div>
<h3>Revenue</h3>
<input type="text" v-model="formData.revenue">
</div>
<div>
<h3>Expenses</h3>
<input
浏览 0提问于2017-09-12得票数 1
回答已采纳
我在一个vue项目中使用了元素ui，在模式中显示了一个带有取消订阅输入表单的模式/对话框。提交成功后，我会显示一条感谢消息。一切都在按预期进行。我唯一的问题是，当显示v-else (成功消息)时，我想删除注入的元素UI "X“关闭按钮。在注入的元素上这是可能的吗？ Vue /元素UI： <el-dialog :visible.sync="unsubscribeDialogVisible">
<div class="dialog-content">
<transition name="fade
浏览 26提问于2020-11-03得票数 0
回答已采纳
我是新手(Axios、PHP和vue.js)，我想在编辑表单中填充当前数据，而不使用for循环。 当我使用下面的代码时，它会将数据提交给我在输入字段中键入的SQL数据库 updateRecord: function (id) {
let formData = new FormData();
console.log(formData);
formData.append('name', this.name);
formData.append('msisdn', this.msisdn);
浏览 11提问于2019-05-21得票数 0
在netlify上部署我的应用程序时，我使用了皂苷模板。我想要将netlify表单与皂苷集成起来，所以我使用了docs表单结构。
<form name="contact" method="POST" data-netlify="true">
<p>
<label>Name<input type="text" bind:value={$user.name} /></label>
</p>
<p>
浏览 1提问于2020-11-10得票数 0
回答已采纳
3回答
在提交和/或重定向后重置表单输入
、、、、
我已经建立了一个联络表格，这是很好的工作，但我遇到了两个问题，我无法解决。
首先，我想知道是否有一种很好的方式来清除表单中用户输入的数据，例如在提交之后，我希望清除name/mail/message字段。
但更大的问题是，每次提交或刷新相同的信息都会通过电子邮件发送，我已经阅读了这方面的内容，到目前为止，我只找到了解决这个问题的重定向方法。在发送电子邮件(thankyou.php等)后重定向到另一个页面。如果这是唯一的解决办法，那么第一个问题就不是问题，因为我显然必须这样做。如果是，我如何实现这一点？
我试着使用if(!$mail->Send()) { header("L
浏览 4提问于2017-03-20得票数 0
回答已采纳
我正在使用react.js制作一个表单。我正在尝试使一个div出现，然后在表单提交后消失。我怎么才能正确地做到这一点呢？
当表单被提交时，我的代码现在只会带我到一个空白页面。
应要求更新
constructor(props) {
super(props)
this.state = {
messageConfirm: ''
}
this.handleInput1 = this.handleInput1.bind(this);
this.handleInput2 = this.handleInput2.bind(this);
浏览 1提问于2020-10-19得票数 2
回答已采纳
我在表单数据之外有一个按钮。当我提交表单时，我可以得到序列化值，但不能得到FormData。我怎样才能得到FormData？
function submitForm() {
console.log($('#form1').serialize());
console.log(new FormData(document.getElementById('form1')));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
浏览 7提问于2017-12-13得票数 2
回答已采纳
1回答
我有一个表单页面，我使用它来创建和更新
我的表单字段是这样的；
myForm: {
name: (...)
email: (...)
password: (...)
}
我可以成功地提出请求。
当我们谈到更新过程时，我以这种方式获得数据(this.myForm = response.data)
当我发送更新请求时，我只想让表单字段走，但它是这样的
myForm: {
name: (...)
email: (...)
password: (...)
createdAt: (...)
updatedAt: (...)
_id: (...)
}
我不想发送crea
浏览 11提问于2022-04-25得票数 0
我正在进行我的第一个vue-阿波罗项目，我想知道创建编辑表单的最佳方法是什么。我似乎在网上找不到任何例子。
现在，我正在像这样查询我的用户数据：
export default {
data() {
return {
user: {
id: '',
name: '',
email: '',
},
}
},
apollo: {
user: {
query: USER_QUERY,
},
},
}
下面是一个简单的表格：
浏览 2提问于2020-04-06得票数 1
回答已采纳
我想为I创建一个组件，但是在表单提交过程中我无法获得v模型数据。
我可以通过正常的输入元素来完成。
下面是一个例子。谢谢
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://unpkg.com/vue"></script>
<tit
浏览 1提问于2017-04-25得票数 0
我用Vuejs和Inertiajs和Laravel。
数据来自数据库，然后通过Inertiajs作为支柱传递给我的Vue组件。
在组件中显示数组(而不是items数组，而是在actualitems数组中循环--它的结构与items数组具有相同的结构)。
用户可以更改商品的数量，并更新新的价格。
在表单提交时，如何获得新更改的所有数据？
实例
-
<div class="container-fluid" id="app">
<form @submit.prevent="submitForm">
<ul id
浏览 2提问于2020-11-24得票数 0
回答已采纳
我想渲染一些表单并将它们绑定到Vue。json上的表格是这样列出的。
formslist:[
"<input type='text' name='item1' v-model='item1'>",
"<input type='text' name='item2' v-model='item2'>",
]
我可以渲染它们，但不能绑定。模板就是这个。
<div v-for="form in formslist"
浏览 3提问于2017-06-30得票数 2
在Laravel 8视图中，我有一个带有表单的Vue组件。
<contact-form-component contact-store-route="{{ route('contact.store') }}">
</contact-form-component>
ContactFormController.vue
<template>
<div>
<div v-if="success">
SUCCESS!
</div&
浏览 2提问于2022-10-19得票数 0
我在TypeScript中创建了一个类来处理表单提交和服务器错误： export default class Form<Model> {
private readonly original: Model
private changes: Partial<Model>
constructor(data: Model) {
this.original = data
Object.keys(this.original).forEach(key => this.initialiseData(key))
}
浏览 46提问于2019-07-03得票数 0
回答已采纳
2回答
所以我有一个函数在Laravel中生成蜜罐字段。
问题是当我提交带有角的表单时，javascript对象不包含my_time或my_name字段。
public function generate(array $honey_name, array $honey_time)
{
$honey_time_encrypted = parent::getEncryptedTime();
// Encrypt the current time
$html = '<div id="' . $honey_name['name'] . &
浏览 5提问于2015-12-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
