Как отправить данные на сервер без обновления страницы в vuejs?

Question

Я выполняю CRUD с vue -cli и nodejs на стороне сервера. Итак, у меня есть такая форма

<template>
  <div id="formRoot">
    <div class="form" >
      <form @submit.prevent="sendToTable" action="/create" method="post">
      Name
      <input type="text" v-model="row.name" name="name" />
      Price
      <input type="number" name="price" v-model="row.price"  />
      Description
      <textarea v-model="row.description" rows="3" name="desc"/>
      <input type="submit" id="button" value="SAVE" />
    </form>
  </div>
  <form class="" action="create" method="post">
  <input type="text" name="input">
  <input type="submit" value="send">
 </form>
</div>
</template>

<script>

 export default{
   data(){
     return{
       row: {
         name: '',
         price: '',
         description: ''
       }
     }
   },
   methods: {
     sendToTable() {
       console.log(this.row);
       this.$parent.addToTable(this.row);
     }
   }
 }


 </script>

@ submit.prevent предназначен для предотвращения обновления страницы, и, конечно же, у меня есть метод с именем sendToTable.
в узле у меня есть это:

  const path = require('path');
  const morgan = require('morgan');

  const app = express();

  //middlewares
  app.use(express.urlencoded({extended: false}));
  app.use(express.static(path.resolve(__dirname, '../dist')));
  app.use(morgan());

  app.post('/create', (req, res) => {
     console.log(req.body);

  });

  const port = 3000;
  app.listen(port, () => {
    console.log('server listening on port ' + port);
  });

проблема в том, что сервер не может получить почтовый запрос, я думаю, это из-за свойства @ prevent.default.
Я попытался отправить почтовый запрос с почтальоном, и он работает, поэтому я уверен, что проблема находится в интерфейсе.
Что мне делать? Как на самом деле кодируются те одностраничные веб-приложения, которые могут отправлять данные на сервер?

Answer 1

Вам действительно нужно отправить данные формы через HTTP-запрос. Вы можете использовать такую ​​библиотеку, как Ax ios (очень популярна) или fetch (проверьте список поддерживаемых браузеров ).

Еще одна вещь, которую вы, кажется, делаете, - это вызов метода родительского компонента этого компонента. Это противоречит Vue одностороннему потоку данных и не является оптимальным. Лучшее решение - сделать так, чтобы ваш компонент испускал событие с прикрепленными данными.

Например (используя fetch)

<form @submit.prevent="sendToTable" method="post" action="/create">

methods: {
  async sendToTable ($event) {
    const form = $event.target
    // post form as a regular "submit" would
    let res = await fetch(form.action, {
      method: form.method,
      body: new URLSearchParams(new FormData(form))
    })
    if (res.ok) {
      // emit the "row-added" event to the parent
      this.$emit('row-added', { ...this.row }) // using spread syntax to break references
    } else {
      // you might want to do something else here in case of an error
      console.error(res)
    }
  }
}

и в ваш родительский компонент (при условии, что дочерний компонент назван RowAdder)

<RowAdder @row-added="addToTable"/>