从 Vue js 中的模态提交表单

Posted 2023-05-09

【中文标题】从 Vue js 中的模态提交表单

【英文标题】：Submit a form from a Modal in Vue js

【发布时间】：2021-01-28 08:03:16

【问题描述】：

我需要从模式发送一个表单。不使用完整的 Vue 应用程序，而是在我的 html 页面中插入 Vue.js。

我用我目前的模态尝试了很多不成功的事情，所以我把它简化为我第一次使用的基本模态示例https://vuejs.org/v2/examples/modal.html

对于表单，我还在https://vuejs.org/v2/cookbook/form-validation.html 使用了最基本的表单验证示例（我在其他地方也可以使用）。

我创造了这个不成功的小提琴：

https://jsfiddle.net/JIBRVI/03qnok9m/53/

Vue.component('modal', 
  template: '#modal-template'
)
// start app
// eslint-disable-next-line no-new
new Vue(
  el: '#app',
  data: 
    showModal: false,
    errors: [],
    name: ''
  ,
  methods: 
    checkForm: function (e) 
      if (this.name) 
        return true
      
      this.errors = []
      if (!this.name) 
        this.errors.push('Name required.')
      
      e.preventDefault()
    
  

)

在基本模式示例中，我添加了带有字段、提交按钮和占位符的表单以显示错误。应用程序中数据部分的输入字段«name»和数组«errors»。我还添加了 «checkForm» 方法。

主要错误说：

属性或方法“checkForm”；上没有定义 实例，但在渲染期间引用。确保该属性是 反应式，无论是在数据选项中，还是对于基于类的组件，通过 初始化属性

可能主页面可以和modal通信，所以不能使用主页面的数据和方法。

我也尝试用表单制作一个组件，但它也不起作用。我无法与模态通信。

我们将不胜感激。

【参考方案1】：

您需要将name 和checkform 方法移动到modal 组件。您当前已在 app 组件中定义了这两个，并尝试从 modal 组件中的模态访问它。

Vue.component('modal', 
  template: '#modal-template',
  data()
    return 
        name: '',
        errors: [],
    
  
  ,
  methods: 
    checkForm: function (e) 
      if (this.name) 
        return true
      

      this.errors = []

      if (!this.name) 
        this.errors.push('Name required.')
      

      e.preventDefault()
    
  
)

【讨论】：

所以一切都必须在组件中。我的错误方法是尝试将应用程序与维护应用程序中所有逻辑的组件进行通信。谢谢。