从 Vue js 中的模态提交表单

Question

我需要从模式发送表单。不使用完整的 Vue 应用程序，而是在我的 HTML 页面中插入 Vue.js。我用我当前的模态尝试了很多不成功的事情，所以我将它简化为我第一次使用的基本模态示例https://v2.vuejs.org/v2/examples/modal.html对于表单，我还使用了https://v2.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-newnew 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” 未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件也许主页可以与模态通信，因此无法使用主页中的数据和方法。我也尝试用表单制作一个组件，但它也没有用。我无法与模态通信。任何帮助将不胜感激。

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

    }

  }

})