vuejs中的登录组件

Question

我已经用下面的代码构建了一个登录组件，用户可以在后台使用flask_login登录。

const LoginScreen = {

    template: `
                <div>
                    <h1>Sign In</h1>
                    <form id="loginform" class="pure-form">
                        <fieldset>
                            <input type="text" name="email" placeholder="email" v-model="logindetails.email"/>
                            <input type="password" name="password" placeholder="password" v-model="logindetails.password"/>
                            <button class="pure-button pure-button-primary" v-on:click="login">Login</button>
                        </fieldset>
                    </form>
                </div>
    `,

    data: function () {
        return {
                logindetails:{}
        }
    },

    methods: {
                login: function(){
                                    axios.post('/login/',
                                        this.logindetails,
                                           {
                                             headers: {
                                                        'Content-type': 'application/json',
                                                        'Accept': 'application/json',
                                                        'X-CSRF-TOKEN': document.querySelector('#csrftoken').getAttribute('content')
                                                       }
                                           }
                                          ).then(response => { this.logindetails = {};
                                                               this.$router.push({path: '/'});
                                                             }
                                                )
                                           .catch(function (error) {
                                                              console.log(error);
                                                            });
                                    }
            }
};

它似乎工作正常(虽然有时它要求我再次登录，似乎没有任何理由)，但是组件将提交的表单细节放入url ( 示例 )的查询字符串中。

有人能告诉我我做错了什么吗?或者，如果我做的完全不对，就指出代码基/指南的方向是正确的登录？

在此之前，非常感谢您。

Answer 1

关于the component is putting the submitted form details into the querystring of the url，原因是单击按钮也会触发表单上的submit。

HTML表单向服务器提交表单值。

但是在JS框架(如Vue或React )中，表单值通常是通过ajax传递的，不需要任何页面刷新。因此，在这里使用<form>没有多大价值。

在这种情况下你可以做两件事

1. 删除<form>元素。它仍然应该正确地工作。
2. 处理表单提交事件。例如：

<form @submit="handleSubmit($event)">

methods: {
    handleSubmit:(e) =>{
      e.preventDefault();
    }
  }

Answer 2

看看Vue v-on事件修饰符来修改默认的元素行为。

就你的情况而言，你可以：

<button @click.prevent="login">Login</button>

或者在表单标签中(确保提交按钮键入" submit ")：

<form @submit.prevent="login">