Laravel和axios提交后清除表格

Question

在我的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 = '';
   }
})

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

Answer 1

this并不指向Promise成功回调中的vue实例

请改用箭头功能。 Arrow功能结合的价值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实例的局部变量，并使用它来访问您的data属性，如下所示：

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

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

    }
}