Vue.js wczytywanie danych w tym samym komponencie

Vue.js wczytywanie danych w tym samym komponencie
M2
  • Rejestracja:ponad 7 lat
  • Ostatnio:około rok
  • Postów:362
0

Cześć, mam pewien problem. Najprościej przedstawię to chyba w ten sposób. Mamy profil użytkownika, w tym profilu są dane, zdjęcia i znajomi użytkownika. Dane użytkownika (po przejściu do profilu) wczytuję tak

Kopiuj
methods: {
loadData() {
        this.$axios.post(`profile-page/user/${this.$route.params.id}`)
        .then((data) => {
          this.user = data.data.data
        })
        .catch(() => {
          this.$q.notify({
            message: this.$t('notification.errors.loadData')
          })
        })
      },
}

created(){
this.loadData();
}

i to jest ok. Do profilu można przejść klikająć w link

Kopiuj
<router-link :to="{name: 'ProfilePage', params: {id: user.id}}">
            {{user.s.name + ' ' + user.s.last_name}}
          </router-link>

problem zaczyna się kiedy na liście znajomych kliknę w taki sam link i wtedy chciałbym przejść do profilu tego wybranego znajomego, co prawda link się zmienia w sensie id zmienia się na nowo wybranego użytkownika jednak dane się nie przeładują. Czy muszę zrobić coś w stylu ponownego wywołania metody loadData()?

edytowany 1x, ostatnio: michalos25
Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:2 minuty
  • Lokalizacja:Koszalin
  • Postów:10094
1

created() odpala się przy tworzeniu komponentu. Po prostu musisz wykonać loadData() jeszcze raz przy zmianie usera.

Albo w event kliku, albo w watch'u na property.

M2
  • Rejestracja:ponad 7 lat
  • Ostatnio:około rok
  • Postów:362
0

Hej, zrobiłem

Kopiuj
watch: {
      user() {
        this.loadDataUser();
      }
    }

i faktycznie działa tylko teraz odświeżanie wykonuje się cały czas. W konsoli jest coś takiego
con.png

  • con.png (54 KB) - ściągnięć: 32
Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:2 minuty
  • Lokalizacja:Koszalin
  • Postów:10094
0
michalos25 napisał(a):

Hej, zrobiłem

Kopiuj
watch: {
      user() {
        this.loadDataUser();
      }
    }

i faktycznie działa tylko teraz odświeżanie wykonuje się cały czas. W konsoli jest coś takiego
con.png

No nic dziwnego, skoro w then() masz this.user = , czyli zmieniasz property, na co watch się odpala, fetch się odpala, ad. infinitum.

Proponuję zrobić dwie dane (jedną property user, i jedną daną _user w data()). Wtedy watch na user a then() zmianiałby _user.

edytowany 1x, ostatnio: Riddle
M2
  • Rejestracja:ponad 7 lat
  • Ostatnio:około rok
  • Postów:362
0

Chyba nie do końca rozumiem jak to ma wyglądać, w return {} dodałem _user: null

Kopiuj
data() {
      return {
        user: null,
        _user: null
      }
    }

ale nie wiem jak należy zmienić watch i jak powinno wyglądać loadDataUser()

Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:2 minuty
  • Lokalizacja:Koszalin
  • Postów:10094
0
michalos25 napisał(a):

Chyba nie do końca rozumiem jak to ma wyglądać, w return {} dodałem _user: null

Kopiuj
data() {
      return {
        user: null,
        _user: null
      }
    }

ale nie wiem jak należy zmienić watch i jak powinno wyglądać loadDataUser()

Najpierw opowiedz dokładnie co chcesz zrobić. Do tej pory myślałem że user to prop, ale po tym co mówisz to ciężko się domyślić co tam masz.

Wklej proszę cały plik komponentu który masz oraz w jaki sposób go używasz.

JC
  • Rejestracja:około 10 lat
  • Ostatnio:prawie 5 lat
  • Postów:6
1

Po prostu watcha ustaw na parametr Twojej route'y...

Kopiuj
watch: {
  '$route.params.id' () {
    // odpal funkcje ladujaca dane nowego usera (ew. w czasie pobierania danych wyswietl jakis loader)
  }
}
Riddle
Fajne znalezisko. Nie wiedziałem że tak można.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.