Очистить данные после успешного выполнения запроса ajax

Question

Я отправляю данные из формы в базу данных с помощью запроса ajax post.После успешного выполнения запроса, отправка данных в массив в хранилище.Чтобы не загружать все из Backend API снова.Работает нормально.

Но после отправки данных в массив мне нужно очистить форму, чтобы пользователь мог добавить другие данные.И он очищает форму перед отправкой в ​​массив.

AddToDB.vue

<template>
<div class="addToDB">
    <form @submit.prevent="add">
        <label> Name </label>
        <input type="text" v-model="form.name"/> <br/>
        <label> Price </label>
        <input type="number" v-model="form.price"/> <br/>

        <button>Add</button>
    </form>
</div></template>

---

<script>
    import axios from 'axios'

    export default {
    name: "AddToDB",
    data() {
        return {
            form: {
                name: '',
                price: ''
            }
        };
    },
    methods: {
        add(){
            axios.post("http://test.com/add', this.$data.form, {
                headers: {
                    "Authorization": `TOKEN`
                }
            })
            .then((response) => {
                this.$store.commit('addList', this.form);

                return Promise.resolve();
            })
            .then(() => this.clearForm());
        },
        clearForm(){
            this.form.name = '';
            this.form.price = '';
        }

      }
  }
</script>

---

и store.js

export default {
state: {
    list: []
},
getters: {
    getList(state){
        return state.list;
    }
},
mutations: {
    addList(state, $data){
        state.list.push($data);
    }
} }

Answer 1

Это должно работать для вас.

// Your current code (not working)...
/*
  axios.post('http://test.com', this.$data.form, {
      headers: {
          "Authorization": `Bearer ${this.$store.getters.currentUser.token}`
      }
  })
  .then((response) => {
      this.$store.commit('addList', this.form);
  })
  .finally(() => this.clearForm())
*/

// Updated code...
axios.post('http://test.com', this.$data.form, { headers: { 'Authorization': `Bearer ${this.$store.getters.currentUser.token}` } })
  .then((response) => {
    this.$store.commit('addList', this.form);
    
    return Promise.resolve();
  })
  .then(() => this.clearForm());