Vue表单不在请求中发送数据

Question

我在一个组件中有一个表单，我正在尝试使用Ajax请求发送提交数据：

          <form>
            <div class="control">
              <input class="input is-large" type="email" v-model="email" required>
              <label>E-post</label>
            </div>
            <div class="control">
              <input class="input is-large" type="password" v-model="password" required>
              <label>Passord</label>
            </div>
            <div @click="save" type="submit" class="button hero-button is-medium is-primary">
              Logg in
            </div>
          </form>

这是发布请求的方法，我正在使用axios库来处理Ajax：

methods: {
      save() {
        const form = new FormData();
        form.append('email', this.email);
        form.append('password', this.password);

        this.$backend.post('/user/login', form, {
        }).then(() => {
            console.log('success');
        }, (err) => {
            console.log(err);
        });
      }
    }

但是，当我检查后端，用laravel构建时，我得到一个空的请求：

  

{ “请求”：[]}

这是后端控制器中的功能：

public function login(Request $request)
    {
        //testing $request object
        return ['request' => $request->all()];            

        $authenticatedUser = $this->authenticate($request->email, $request->password);

        if (!$authenticatedUser) {

            $remoteAuthenticated = $this->checkWplUser($request->email, $request->password);
            if (!$remoteAuthenticated) {

                return $this->response->errorUnauthorized();
            }
        }
        return $this->issueToken($request->email, $request->password);
        //return $this->returnUserResponse();
    }

这就是请求标头的样子：

我该如何解决这个问题？