从 Vue js 中的模态提交表单

Question

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

我用我现在的模态尝试了很多不成功的东西，所以我把它简化为我第一次使用的基本模态示例https://vuejs.org/v2/examples/modal.html
对于表单，我还使用了 https://vuejs.org/v2/cookbook/form-validation.html 中最基本的表单验证示例（我在其他地方也有）。
而我创建这个不成功fiddle:

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» 方法。

主要错误说：

Property or method "checkForm" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

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

我也试过用form做一个组件，也没用。我无法与模态通信。

如有任何帮助，我们将不胜感激。

Answer 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()
    }
  }
})

从 Vue js 中的模态提交表单

Submit a form from a Modal in Vue js

javascript

forms

modal-dialog

vue.js