我需要从模式发送表单。不使用完整的 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” 未在实例上定义,但在渲染期间被引用。通过初始化属性,确保此属性是反应性的,无论是在数据选项中,还是对于基于类的组件
也许主页可以与模态通信,因此无法使用主页中的数据和方法。
我也尝试用表单制作一个组件,但它也没有用。我无法与模态通信。
任何帮助将不胜感激。
当年话下
相关分类