頁面模式彈出提交

我無法使用vuejs和bootstrap模式彈出窗口在laravel中重新加載頁面。我有模式彈出內部的表格：頁面模式彈出提交

<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的形式，頁面不會刷新this.fetchUser()方法裏面AddnewUser函數。請幫助我......謝謝

來源

2016-05-09 Tashi Tobgay

嘗試刪除'方法=「POST」'你的窗體聲明 –

我們展示你的路由。並且不要使用：''../ api/users'' - 你可以：''/ api/users'' –

你一定要防止表單按照你的建議與@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'); 
    }

來源

2016-05-09 13:51:12 Saul

謝謝，讓它工作...對於遲到的回覆感到抱歉... –

頁面模式彈出提交

回答

相關問題