Question

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

<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()
}

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

compile.php第8873行中的MethodNotAllowedHttpException：

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

Answer 1

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

您的代码中存在一些小错误。首先，vue-resource方法（$ http.get和$ http.post）返回promises，因此使用.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');
  }

模态弹出提交页面重新加载

1 个答案: