Laravel 和 axios 提交后清除表单答案

【问题标题】：Laravel and axios clear Form after submitLaravel 和 axios 提交后清除表单
【发布时间】：2018-01-23 03:25:56
【问题描述】：

在我的 Laravel 应用程序中，我使用 vue 和 axios 提交了一个表单。提交后我想清除表单中的输入字段，但它不起作用。

HTML：

<form method="post" enctype="multipart/form-data" v-on:submit.prevent="addPost">
  <textarea id="post_area" v-model="content"></textarea>
  .....
</form>

JS：

const app = new Vue({
el: '#app',
data: {
  content: '',
  posts: []
},

......

.then(function (response) {
   if(response.status===200) {
      //reload posts
      app.posts = response.data;
      this.content = '';
   }
})

它只是不会清除输入字段。

【问题讨论】：

标签： javascript ajax vue.js laravel-5.4 axios

【解决方案1】：

this 没有指向你的 Promise 成功回调中的 vue 实例

改用箭头函数。箭头函数按词法绑定this的值

const app = new Vue({
el: '#app',
data: {
  content: '',
  posts: []
},

......

.then( (response) => {
   if(response.status===200) {
      //reload posts
      app.posts = response.data;
      this.content = '';
   }
})

或者创建一个指向正确 vue 实例的局部变量并使用它来访问您的数据属性，如下所示：

methods:{
    addPost(){
        var vm = this;

        //.....axios post
         .then( (response) => {
            if(response.status===200) {
                //reload posts
                app.posts = response.data;
                vm.content = '';
            }
        }) 

    }
}

【讨论】：

谢谢！那很简单。