从 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-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” 未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

也许主页可以与模态通信，因此无法使用主页中的数据和方法。

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

任何帮助将不胜感激。

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