Vuejs表单提交不起作用

时间:2017-02-05 15:52:23

标签: 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)

在我的HTML代码中,我声明了我的表单:<form v-on:submit.prevent="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"
});

如您所见,登录功能在我的方法中,所以我不明白为什么vue会抛出错误

编辑:感染JSFiddle。提交表单(点击登录后)

时会出现问题

1 个答案:

答案 0 :(得分:2)

看起来您的实例存在冲突。组件中有onStart属性,login实例中有login方法。尝试使用不同的名称。 source code of AppCompatActivity

  

将在实例上设置数据属性和方法,因此   简短的回答是:不要使用冲突的名字:)