正文 

当前位置： 首页 > 问答 >

Vue.js 表单提交立即用 v-if 显示

     2023-02-22     35

关键词：

【中文标题】Vue.js 表单提交立即用 v-if 显示【英文标题】：Vue.js Form submits immediately shown with v-if 【发布时间】：2020-01-04 10:56:54 【问题描述】：

正在构建一个 Wordpress 插件并且正在使用 Vue Js。 我设置了一个变量，该变量将在单击按钮时设置为 true 然后另一个 div 是一个模态，只要变量为 false，它就会在 v-if 中保持隐藏。也是div modal(pop up)中的一种形式

问题是一旦值改变，按下按钮，表单会立即提交。

这种情况一直在发生，但我通常会忽略它，因为总是有一个必填字段会阻止表单自动提交。

Vue.js 数据对象


  selected_to_show : false,

模态 div

<div v-if="selected_to_show === true" class='mp-modal'>

  <form on:submit.prevent="xhrSubmit()">

  <form>
</div>

<button v-on:click="selected_to_show = true"></button>

这可行，但一旦模式打开，表单会立即提交。

注意：表单中只有两个按钮元素都设置为type="button"

目标是防止表单显示时自动提交

【问题讨论】：

提供的代码有两个错误。结束 &lt;form&gt; 标记缺少斜杠，submit 侦听器需要是 v-on: 而不是 on:。但是，这些都不能解释表单提交的原因。我的猜测是您有代码来提交过早运行的表单，但您没有包含该代码，因此很难确切知道。例如可能是 v-on 被错误地写成 v-bind。 【参考方案1】：

如果有人仍然使用这种方法重新渲染 vue 应用程序，我的建议是，不要。

重新渲染应用程序的最佳方法是这样做

this.forceUpdate();

这将重新渲染 vue 应用，而不是修改渲染期间使用的 vue 实例的数据属性。

但是，不要过度使用它。 大多数情况下，当您的视图没有自然地重新渲染时，可能是因为您做错了什么。

【讨论】：

在提交表单 Vue.js 时显示 flash 消息

】在提交表单Vue.js时显示flash消息【英文标题】：ShowflashmessageonSubmitformVue.js【发布时间】：2020-07-1613:51:39【问题描述】：我正在尝试创建一个联系表单，我已经完成了，但现在我正在尝试在提交时创建一个提交Flash消息。提交后... 查看详情

axios表单提交--vue.js

...，比如我们需要下面这样接受数据，就需要模拟表单 查看详情

使用 laravel 和 vue.js 提交数据后显示消息

...】：美好的一天；我在laravel和vue.js中是新的，当我提交表单时，如果我在验证其中一个输入时遇到问题，它会正确显示，如BrandNamefieldisrequired.butmyrealproblemiswhen 查看详情

为啥在 vue.js 中使用 v-if 时我的 API 数据显示为未定义？

】为啥在vue.js中使用v-if时我的API数据显示为未定义？【英文标题】：WhydoesmyAPIdatashowupasundefinedwhenusingav-ifinvue.js?为什么在vue.js中使用v-if时我的API数据显示为未定义？【发布时间】：2021-06-1711:36:23【问题描述】：模板<template>&... 查看详情

vue.js用select实现省，市，提交后，默认显示省，市信息

<selectv-model="citys"name="cityVal"@change="schoolName(citys)">      <optionv-for="(item,index)incity":value="item.val"v-text="item.name"></option>< 查看详情

包含 Vue.js v-if 和 v-for 指令的 HTML 标签在加载时闪烁

...将数据发送到一个基本且非常简单的API，该API通过下面的表单订阅电子邮件地址并显示一些消息（状态和错误）。我特别使用指令v-if和v-for来显示错误和两 查看详情

Vue.js 表单提交没有看到更新的模型数据

】Vue.js表单提交没有看到更新的模型数据【英文标题】：Vue.jsformsubmitdoesn\'tseeupdatedmodeldata【发布时间】：2020-12-2015:04:41【问题描述】：我有一个启用了提交阻止的表单：<formmethod="get":action="urls.baseUrl"ref="productsFilterForm"@submit.pre... 查看详情

使用 ajax 在 Vue.js 中提交表单

】使用ajax在Vue.js中提交表单【英文标题】：SubmittingforminVue.jswithajax【发布时间】：2015-10-1823:47:13【问题描述】：我真的很纠结如何使用Vue.js和vue-resource提交一个发出ajax请求的表单，然后使用响应来填充一个div。我使用js/jQuery从... 查看详情

在 Vue.js 中使用 V-for 和 V-if 在条件下显示 JSON 数据

】在Vue.js中使用V-for和V-if在条件下显示JSON数据【英文标题】：DisplayingJSONdataonconditionusingV-forandV-ifinVue.js【发布时间】：2020-11-2909:40:13【问题描述】：我正在使用axios从Vue中的外部Api获取数据（订单）。我获得了JSON数据，并且能... 查看详情

如何使用 vue.js 2 提交表单？

】如何使用vue.js2提交表单？【英文标题】：Howtosubmitaformusingvue.js2?【发布时间】：2018-06-0108:50:49【问题描述】：我的视图刀片laravel是这样的：<formslot="search"class="navbar-search"action="url(\'search\')"><search-header-view></search-heade... 查看详情

从 Vue js 中的模态提交表单

】从Vuejs中的模态提交表单【英文标题】：SubmitaformfromaModalinVuejs【发布时间】：2021-01-2808:03:16【问题描述】：我需要从模式发送一个表单。不使用完整的Vue应用程序，而是在我的HTML页面中插入Vue.js。我用我目前的模态尝试了很... 查看详情

在没有 v-if 和 v-for 的 Vue.js 中显示（添加、编辑）和删除多个列中的列表项

】在没有v-if和v-for的Vue.js中显示（添加、编辑）和删除多个列中的列表项【英文标题】：Displaying(adding,editing)andDeletinglistitemsinmultiplecolumnsinVue.jswithoutv-ifandv-for【发布时间】：2020-12-1617:45:24【问题描述】：我是Vue.js的初学者。我想... 查看详情

如何防止我的表单在 Vue.js 中使用 Enter 键提交？

】如何防止我的表单在Vue.js中使用Enter键提交？【英文标题】：HowtopreventmyFormfromsubmittingwithEnterKeyinVue.js?【发布时间】：2021-07-2719:02:58【问题描述】：我总是在Vue.js中尝试$event，但它从来没有为我工作过。这是我的注册表单html脚... 查看详情

使用 Vue.js 和 Axios 向 Mailchimp 提交表单会导致 CORS 错误

】使用Vue.js和Axios向Mailchimp提交表单会导致CORS错误【英文标题】：FormsubmissiontoMailchimpusingVue.jsandAxiosresultsinCORSerror【发布时间】：2018-07-2011:35:20【问题描述】：我的Vue.js应用程序中有一个组件，它使用Axios将电子邮件从表单提交... 查看详情

如何利用vue.js库中的v-if内部指令判断元素显示

第一步，创建静态页面vtext.html，修改title显示的内容并引入vue.js，第二步，在body标签元素内插入两个span元素，在第一个span绑定v-text指令，第二个span中插入message，第三步，编写JS代码，绑定数据源message，第四步，预览静态页面v... 查看详情

如何利用vue.js库中的v-show显示和隐藏元素

...show="ok">Hello!</h1>如果ok这个变量为真，就会显示Hello!v-show是简单的切换元素的CSS属性display，也就是会占用浏览器内存空间，另外一个类似的是v-ifv-if是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与... 查看详情

Formik + Yup：如何在提交前立即验证表单？

】Formik+Yup：如何在提交前立即验证表单？【英文标题】：Formik+Yup:Howtoimmediatelyvalidateformbeforesubmit?【发布时间】：2020-09-0500:47:41【问题描述】：我想在安装表单时显示字段错误。不是在提交之后。是的：constvalidation=Yup.object().shape... 查看详情

html提交表单后返回原页面并显示表单数据

...不成功，使用ajax返回值判断提示用户 参考技术B正常提交表单数据处理入库进行查询回退显示出来显示在表单 查看详情