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

【问题标题】：Vue.js Form submits immediately shown with v-ifVue.js 表单提交立即用 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"

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

【问题讨论】：

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

标签： html typescript vue.js webpack

【解决方案1】：

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

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

this.forceUpdate();

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

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

【讨论】：