Блог

Предыстория: у меня есть приложение, в котором я пытаюсь отправить данные через Axios в мой express Api. Серверная часть express успешно работает с postman.

Проблема: мой запрос POST работал отлично, но как только я создал хранилище Vuex, запрос проходит, но не обновляется в моей базе данных Mongodb.

Дополнительно: при регистрации ответа данные отображаются как «получатель и установщик», я покажу пример ниже:

Шаблон компонента Vue

   <form>

          <label for="monthlypay">Monthly pay</label>
          <input
            type="number"
            v-model.number="earnings"/>
          <input
                class="form-control"
                v-model="expense.expensesKey"
                type="text"
              />
           <input
                class="form-control"
                v-model.number="expense.expensesValue"
                type="number"
              />
          <div class="submit">
            <div>
              <button
                type="submit"
                @clickt="submitBudget">
                Submit
              </button>
            </div>
          </div>
      </form>

 

Объект данных компонента Vue

  data() {
    return {
      earnings: "",
      expenses: [
        {
          expensesKey: "",
          expensesValue: null,
          subExpense: null,
        },
      ],
}
 

Запрос POST

     submitBudget() {
      axios
        .post("http://localhost:4000/api/budget", {
          earnings: this.earnings,
          expenses: this.expenses,
        })
        .then((response) => {
          console.log(response);
        })
        .catch((err) => {
          console.log(err);

        });
    },
 

Методы getter и setter — это то, как Vue прокси-сервер эти запросы. Для отладки, пожалуйста, измените эту часть в своей submitBudget() функции:

 .then((response) => {
          console.log(response);
        })
 

Для:

 .then((response) => {
              console.log(response.data);
            })
 

И вы должны увидеть некоторые реальные данные