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

})

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

主要错误是：

属性或方法“ checkForm”；未在上定义实例，但在渲染过程中被引用。确保此属性是在data选项中或对于基于类的组件，通过初始化属性

也许主页可以与模式通信，所以不能使用主页中的数据和方法。

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

任何帮助都会得到赞赏。

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中的模态提交表单

1 个答案: