Asynchroniczne wyświetlanie danych

Cześć, w projekcie, który sobie piszę we Vue, mam komponent, w którym na created() pobieram i wyświetlam dane z api w postaci v-card, gdzie znajdują się dwa buttony: accept i reject, które również są podpięte pod endpointy i kliknięcie któregoś z nich sprawia, że ten element zostaje usunięty z listy, którą pobieram (tą na created). Chciałbym, żeby po kliknięciu w jakikolwiek przycisk przeładowała mi się templatka i wyświetlone zostały uaktualnione dane z api, jednak nie bardzo wiem jak się za to zabrać, computed działa synchronicznie, także raczej odpada. Jakieś pomysły?

Dlaczego nie zrobisz zwyczajnej metody?

/* ... */

data() {
  return {
    isRefreshing: false,
    foo: 'hehe',
    bar: 'hoho',
  };
},

methods: {
  async refresh() { // tę metodę możesz normalnie uruchomić z dowolnego kontekstu, np.: v-on:click="refresh"
    this.isRefreshing = true; // jeśli chcesz w międzyczasie np. pokazać jakiś loader

    const newData = await fetch(...);

    this.foo = newData.foo;
    this.bar = newData.bar;

    this.isRefreshing = false;
  },
},

/* ... */

Patryk27 napisał(a):

Dlaczego nie zrobisz zwyczajnej metody?

/* ... */

data() {
  return {
    isRefreshing: false,
    foo: 'hehe',
    bar: 'hoho',
  };
},

methods: {
  async refresh() { // tę metodę możesz normalnie uruchomić z dowolnego kontekstu, np.: v-on:click="refresh"
    this.isRefreshing = true; // jeśli chcesz w międzyczasie np. pokazać jakiś loader

    const newData = await fetch(...);

    this.foo = newData.foo;
    this.bar = newData.bar;

    this.isRefreshing = false;
  },
},

/* ... */

Zrobiłem w bardzo podobny sposób, ale nie zauważyłem, że metoda odświeżająca po zaakceptowaniu lub odrzuceniu nie znajdowała się w metodach i mi logowało błąd. Głupia pomyłka. Dzięki za pomoc anyway!