模式弹出提交页面重新加载答案

【问题标题】：Page reload on modal popup submit模式弹出提交页面重新加载
【发布时间】：2016-09-03 15:52:52
【问题描述】：

我无法在 laravel 中使用 vuejs 和引导模式弹出窗口重新加载页面。我在模态弹出窗口中有一个表单：

<div class="modal fade" id="userAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <form class="form-horizontal form-label-left input_mask" method="POST" @submit="AddNewUser">
        ...
        <button type="submit" class="btn btn-primary">Save</button>
    </form>
</div>

这是我的 vuejs 代码：

methods: {
        fetchUser: function () {
            this.$http.get('../api/users', function (data) {
                this.$set('users', data)
            });
        },
 AddNewUser: function () {
            //e.preventDefault();
            var user = this.newUser;
            this.newUser = {fname: '', mname: '', lname: '', cid: '', email: '', password: '', utype: ''};
            console.log(this.newUser);
            this.$http.post('../api/users', user);
            $('#userAddModal').modal('hide');
            this.fetchUser()
}

每次我提交时，用户都会被添加，但是当页面刷新时，我会收到如下错误：

compiled.php 第 8873 行中的 MethodNotAllowedHttpException：

如果我将@submit.prevent 放入表单中，则页面不会使用AddnewUser 函数内的this.fetchUser() 方法刷新。请帮帮我...谢谢

【问题讨论】：

尝试删除表单声明中的method="POST"
向我们展示您的路线。并且不要使用：'../api/users' - 你可以：'/api/users'

标签： laravel-5 vue.js

【解决方案1】：

您肯定需要按照您的建议阻止使用@submit.prevent 提交表单。否则浏览器会自己提交表单。

您的代码中有一些小错误。首先，vue-resource 方法（$http.get 和 $http.post）返回 Promise，所以使用 .then 而不是传入回调。其次，您在发布请求通过之前致电fetchUser。最后，响应数据在response.data 中，而不是像您那样直接作为参数传递给您的回调。

以下代码应该可以工作：

methods: {
  fetchUser: function () {
    this.$http.get('/api/users').then(function (response) {
      this.$set('users', response.data);
    });
  },
  AddNewUser: function () {
    var user = this.newUser;
    this.newUser = {fname: '', mname: '', lname: '', cid: '', email: '', password: '', utype: ''};
    console.log(this.newUser);

    this.$http.post('/api/users', user).then(function () {
      this.fetchUser();
    });

    $('#userAddModal').modal('hide');
  }

【讨论】：