Laravel 和 axios 提交后清除表单

Posted 2023-02-22

【中文标题】Laravel 和 axios 提交后清除表单

【英文标题】：Laravel and axios clear Form after submit

【发布时间】：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 = '';
   
)

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

【参考方案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 = '';
            
        ) 

    

【讨论】：

谢谢！那很简单。