Javascript Vuejs表单提交不起作用
我想提交表单中的值,但每次按下“提交”按钮时,都会出现以下错误:Javascript Vuejs表单提交不起作用,javascript,forms,vue.js,Javascript,Forms,Vue.js,我想提交表单中的值,但每次按下“提交”按钮时,都会出现以下错误: Uncaught TypeError: login is not a function at Object.submit [as fn] (eval at Yr (vue.min.js:7), <anonymous>:2:369) at HTMLFormElement.<anonymous> (vue.min.js:6) 正如您看到的,登录函数在我的方法中,所以我不明白为什么vue会抛出错误 编辑:导入一
Uncaught TypeError: login is not a function
at Object.submit [as fn] (eval at Yr (vue.min.js:7), <anonymous>:2:369)
at HTMLFormElement.<anonymous> (vue.min.js:6)
正如您看到的,登录函数在我的方法中,所以我不明白为什么vue会抛出错误
编辑:导入一个。当您提交表单时(单击登录后)会出现问题。您的实例似乎有冲突。组件中有一个
login
属性,在Vue
实例中有一个login
方法。尝试使用不同的名称:
数据属性和方法都将在实例上设置,因此
简短的回答是:不要使用相互冲突的名称:)
你能添加你的模板吗?当然可以。这是整个JS文件:是的,不敢相信我看过了。谢谢
// register
Vue.component("login-form",
{
template: // THE HTML FORM
,
data: function () {
return data;
},
ready: function () {
this.isAuthenticated = this.checkIfAuthenticated();
this.userName = localStorage.getItem("id_name");
},
methods: {
checkIfAuthenticated: function () {
const users = [
{
id: 1,
name: "tom"
},
{
id: 2,
name: "brian"
},
{
id: 3,
name: "sam"
}
];
this.$set("users", users);
},
login: function () {
const headers = { "Content-Type": "application/x-www-form-urlencoded" };
$.ajax({
url: "/token",
type: "post",
data: `username=${this.login.username}&password=${this.login.password}`,
headers: headers,
success: function (data) {
console.info(data);
},
error: function() {
this.isValid = false;
}
});
}
}
});
// create a root instance
var vue = new Vue({
el: "#loginForm"
});