[英]Vuejs form submit not working
I want to submit the values in my form but each time I press the submit button I get the following error: 我想在表单中提交值,但是每次按下提交按钮时,都会出现以下错误:
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)
In my HTML code I have my form declared as such: <form v-on:submit.prevent="login">
在我的HTML代码中,我这样声明了表单: <form v-on:submit.prevent="login">
In the JS it looks like this: 在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"
});
As you see the login function is in my methods, so I don't see why vue is throwing the error 如您所见,登录功能在我的方法中,所以我不明白为什么vue会引发错误
Edit: inluced a JSFiddle . 编辑:包括一个JSFiddle 。 The problem happens when you submit the form (after you click on login) 当您提交表单时(单击登录后)会发生问题
Looks like your instance has a conflict. 看起来您的实例有冲突。 There is a login
property in a component and there is a login
method in Vue
instance. 组件中有一个login
属性, Vue
实例中有一个login
方法。 Try to use different names. 尝试使用其他名称。 Issue at vuejs github : 在vuejs github上发布 :
Both data properties and methods will be set on the instance, so the short answered is: don't use conflicting names :) 数据属性和方法都将在实例上设置,因此简短的回答是:不要使用冲突的名称:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.