Vue.js wczytywanie danych w tym samym komponencie

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

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

<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()?

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.

0

Hej, zrobiłem

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

0
michalos25 napisał(a):

Hej, zrobiłem

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.

0

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

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

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

0
michalos25 napisał(a):

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

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.

1

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

watch: {
  '$route.params.id' () {
    // odpal funkcje ladujaca dane nowego usera (ew. w czasie pobierania danych wyswietl jakis loader)
  }
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1