从 Vue js 中的模态提交表单

Question

我需要从模式发送一个表单。不使用完整的 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通信，所以不能使用主页面的数据和方法。

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

我们将不胜感激。

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