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实例

请改用箭头功能。箭头函数将词法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 = '';
            }
        }) 

    }
}

提交后，Laravel和axios清除表格

1 个答案: