Как отобразить занные с БД без перезагрузки страницы в Vue.js + Laravel?

Question

[Kharchenko94]

Когда ввожу данные в форму oни появляються сразу в БД. Но на странице приложения они появляються тоолько после перезагрузки страницы. Как сделать чтобы данные на странице появлядись сразу без перезагрузки страницы?

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header"><h3>Біржа вантажів</h3></div>
                    <div class="card-body">
                        <div class="input-group">
                            <span class="input-group-btn">
                            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">
                              Додати
                            </button>
                                <!-- Modal -->
                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                              <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Додати вантаж</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                    </button>
                                  </div>
                                  <div class="modal-body">
                                      <form>
                                      <div class="row">
                                        <div class="col">
                                          <input type="text" class="form-control" placeholder="Дата" v-model="load.date"><br>
                                          <input type="text" class="form-control" placeholder="Звідки" v-model="load.from"><br>
                                          <input type="text" class="form-control" placeholder="Куди" v-model="load.to"><br>
                                          <input type="text" class="form-control" placeholder="Назва" v-model="load.name"><br>
                                          <input type="text" class="form-control" placeholder="Вага" v-model="load.weight">
                                        </div>
                                      </div>
                                    </form>
                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрити</button>
                                    <button type="button" class="btn btn-success" data-dismiss="modal" @click="create">Зберегти</button>
                                  </div>
                                </div>
                              </div>
                            </div>
                             <p></p>
                        </span>
                        </div>
                        <div class="tasks-list">
                            <table class="table table-sm" v-for="load in loads.slice(0, 1)" :key="load.id">
                                <tr >
                                    <th scope="col">{{ load.routes[0].date }}</th>
                                    <th scope="col">{{ load.routes[0].from }} - {{ load.routes[0].to }}</th>
                                    <th scope="col">{{ load.name }}</th>
                                    <th scope="col">{{ load.weight }} т</th>
                                </tr>
                            </table>
                            <hr>
                            <iframe class="align-content-xl-center" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d20309.075323923767!2d30.4721233!3d50.4851493!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sua!4v1588148756055!5m2!1sru!2sua" width="668" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe><br>
                            <p></p>
                            <table class="table table-sm">
                                <tr  v-for="load in loads" :key="load.id">
                                    <td>{{ load.routes[0].date }}</td>
                                    <td>{{ load.routes[0].from }} - {{ load.routes[0].to }}</td>
                                    <td>{{ load.name }}</td>
                                    <td>{{ load.weight }} т</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        mounted() {
            this.fetchData()
        },
        data() {
            return {
                loads: [],
                load: {
                    date: '', from: '', to: '', name: '', weight: ''
                }
            }
        },
        methods: {
            fetchData() {
                axios.get('/api/loads')
                    .then((response) => {
                        this.loads = response.data
                        console.log(response.data)
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            },

            create() {
                axios.post('/api/loads', this.load)
                    .then((res) => {
                    this.loads.unshift(res.data)
                    this.load.date = ''
                    this.load.from = ''
                    this.load.to = ''
                    this.load.name = ''
                    this.load.weight = ''
                    console.log(res.data)
                })
                    .catch((err) => {
                        console.log(err)
                    })
            }
        }
    }
</script>

Comments

[Андрей Пастухов]

А что приходит в ответе на запрос axios.post('/api/loads', this.load)? В res.data приходит сущность load?