Probleme und Lösungen bei der Verwendung des V-Modells zum bidirektionalen Binden der Werte von übergeordneten und untergeordneten Komponenten in Vue

[Vue warn]: Vermeiden Sie es, eine Eigenschaft direkt zu verändern, da der Wert bei jeder erneuten Darstellung der übergeordneten Komponente überschrieben wird. Verwenden Sie stattdessen eine Daten- oder berechnete Eigenschaft basierend auf dem Wert der Eigenschaft. Zu verändernde Eigenschaft: „Wert“

Vue.component("RxSelect", {
 Modell: {
 Requisite: "Wert",
 Ereignis: „Änderung“,
 },
 Requisiten: {
 Wert: [Zahl, Zeichenfolge],
 Karte: Karte,
 },
 Vorlage: `
  <Auswählen
   v-Modell="Wert"
   @change="$emit('ändern', Wert)"
  >
   <Option
   v-für="[k,v] in Karte"
   :Wert="k"
   :Schlüssel="k"
   >{{v}}</option>
  </Auswählen>
  `,
});

<Haupt-ID="App">
 Das aktuell ausgewählte Geschlecht ist: {{map.get(sex)}}
 <div>
 <rx-select :map="Karte" v-model="Geschlecht" />
 </div>
</main>

neuer Vue({
 el: "#app",
 Daten: {
 Karte: neue Karte().set(1, "Vertraulich").set(2, "Männlich").set(3, "Weiblich"),
 Geschlecht: "",
 },
});

Vue.component("RxSelect", {
 Modell: {
 Requisite: "Wert",
 Ereignis: „Änderung“,
 },
 Requisiten: {
 Wert: [Zahl, Zeichenfolge],
 Karte: Karte,
 },
 Daten() {
 zurückkehren {
  innererWert: dieser.Wert,
 };
 },
 betrachten:
 Wert(val) {
  dieser.innerValue = Wert;
 },
 innererWert(Wert) {
  dies.$emit("ändern", val);
 },
 },
 Vorlage: `
 <v-Modell auswählen="innererWert">
 <Option
  v-for="[k,v] in Karte"
  :Wert="k"
  :Schlüssel="k"
 >{{v}}</option>
 </Auswählen>
 `,
});

Vue.component("RxSelect", {
 Modell: {
 Requisite: "Wert",
 Ereignis: „Änderung“,
 },
 Requisiten: {
 Wert: [Zahl, Zeichenfolge],
 Karte: Karte,
 },
 berechnet: {
 innererWert: {
  erhalten() {
  gib diesen Wert zurück;
  },
  setze(Wert) {
  dies.$emit("ändern", val);
  },
 },
 },
 Vorlage: `
 <v-Modell auswählen="innererWert">
 <Option
  v-für="[k,v] in Karte"
  :Wert="k"
  :Schlüssel="k"
 >{{v}}</option>
 </Auswählen>
 `,
});