Vuejs Formular senden funktioniert nicht

Question

ich die Werte in meinem Formular abschicken, aber jedes Mal, wenn ich drücken Sie die Submit-Button ich die folgende Fehlermeldung erhalten:

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 meinem HTML-Code Ich habe meine Form als solche deklariert: <form v-on:submit.prevent="login">

in den JS sieht es wie folgt aus:

// 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" 
}); 

wie Sie die Login-Funktion sehen in meine Methoden ist, so sehe ich nicht, warum vue den Fehler wirft

Bearbeiten: ein JSFiddle eingelassen. Das Problem tritt auf, wenn Sie das Formular abschicken (nachdem Sie auf Login geklickt haben)

Answer 1

Sieht so aus, als hätte Ihre Instanz einen Konflikt. Es gibt eine login Eigenschaft in einer Komponente und es gibt eine login Methode in Vue Instanz. Versuchen Sie verschiedene Namen zu verwenden. :

Both data properties and methods will be set on the instance, so the short answered is: don't use conflicting names :)