Mam składnik „aktualizacja nazwy użytkownika”, który przyjmuje nazwę jako właściwość. Ten komponent ma również przycisk zapisywania i po kliknięciu emituje zdarzenie aktualizacji.

Nazwa jest pusta podczas ładowania strony, ponieważ najpierw muszę pobrać użytkownika w komponencie nadrzędnym. Niestety komponent potomny nie zaktualizuje się po pobraniu użytkownika wraz z jego nazwą. A podczas aktualizacji nazwy w komponencie podrzędnym renderuje poprzednią nazwę.

Próbowałem odtworzyć zachowanie, jeśli chcesz mieć plac zabaw to jest piaskownica

https://codesandbox.io/s/objective-gagarin-e6kbz

Mój składnik podrzędny

<template>
  <div>
    <input v-model="currentName" placeholder="name">
    <button @click="resetCurrentName">Cancel</button>
    <button @click="update">Update</button>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      currentName: ""
    };
  },
  mounted() {
    // update current input to prop
    this.resetCurrentName();
  },
  methods: {
    resetCurrentName() {
      this.currentName = this.name;
    },
    update() {
      this.$emit("update", this.currentName);
      this.resetCurrentName();
    }
  }
};
</script>

I mój komponent nadrzędny

<template>
  <div id="app">
    <UpdateName :name="name" @update="updateName"/>
  </div>
</template>

<script>
import UpdateName from "./components/UpdateName";

export default {
  components: {
    UpdateName
  },
  data() {
    return {
      user: null
    };
  },
  async mounted() {
    await console.log("fetching the user from the api");
    this.user = { name: "bar" };
  },
  computed: {
    name() {
      const user = this.user;

      if (!user) {
        return "";
      }

      return user.name;
    }
  },
  methods: {
    async updateName(newName) {
      await console.log("updating user name via api call");
      this.user.name = newName;
    }
  }
};
</script>

Więc w zasadzie musiałbym wymusić aktualizację właściwości po pobraniu użytkownika z API. Ale Vue powinien to zrobić domyślnie. Więc nie mogę dowiedzieć się, co jest nie tak lub czego tu brakuje. Jak mogę naprawić to zachowanie?

Z góry dziękuję

0
hrp8sfH4xQ4 10 marzec 2020, 13:38

2 odpowiedzi

Najlepsza odpowiedź

Jest kilka rzeczy, na które musisz zwrócić uwagę:

  1. Vue nie obserwuje zagnieżdżonych właściwości. Aby go oglądać, użyj zamiast tego $set
  2. Dzwoniąc pod numer this.resetCurrentName w updateName, resetujesz zmiany wprowadzone w instancji vue. Ponieważ mount nie jest wywoływany przy aktualizacjach właściwości, powoduje użycie starego this.name zamiast nowego. Możesz sprawdzić to samo za console.log s

Oto link do działającego przykładu: https://codesandbox.io/s/tender-payne- 7ydb6

1
Maxzeroedge 10 marzec 2020, 11:50

Oto link do zaktualizowanej piaskownicy https://codesandbox.io/s/pensive-ives- jex2e

   update() {
      this.$emit("update", this.currentName);
      this.resetCurrentName();
    }

Nie resetuj nazwy podczas aktualizacji.

1
kooskoos 10 marzec 2020, 10:59