Aktualizacja listy elementów pobranych z bazy danych

Question

W kontrolerze jest metoda zwracającą listę samochodów z bazy.

public function apiIndex()
{
    return Car::all();
}

W widoku wyświetlam listę za pomocą vue

<div id="app">
    <h1>cars</h1>
    <ul>
        <li v-for="car in cars">@{{ car.name }}</li>
    </ul>
</div>

Wykonuje zapytanie get do /api-cars czyli metody apiIndex().

var app = new Vue({
    el: '#app',
    data: {
        cars: [],
    },
    mounted() {
        axios.get('/api-cars').then(response => this.cars = response.data);
    }
});

Teraz pytanie: jak zrobić że po dodaniu nowego elementu do bazy lista automatycznie zostanie zaktualizowana?

Answer 1

To zależy, jeśli masz w tej apce jakiś event świadczący o zapisie do bazy to zapnij się na nim i po success pobierz aktualne dane. Albo zapnij sobie server sent events i do tego wg mnie warto pomyśleć nad jakimś observable, uprzyjmnia to pracę w takich przypadkach i pozwala łato mergować strumienie rxjs np. przy SSE.