Vue stellt fest, ob sich das Formular geändert hat

Vue ist eines der sehr beliebten Frontend-Frameworks zum Erstellen interaktiver Webanwendungen. In Vue sind Formulare eine der Kernfunktionen. Formulare sind HTML-Elemente, die zum Sammeln von Daten von Benutzern verwendet werden. Sie können verschiedene Arten von Formularelementen enthalten, z. B. Texteingabefelder, Dropdown-Listen, Optionsfelder, Kontrollkästchen und mehr. Eine sehr praktische Funktion in Vue besteht jedoch darin, festzustellen, ob sich das Formular geändert hat. Dies kann normalerweise zum Ausführen einiger Vorgänge verwendet werden, z. B. zum Auffordern des Benutzers, nicht gespeicherte Änderungen zu speichern, zum Deaktivieren oder Aktivieren der Schaltfläche „Speichern“ usw. In diesem Artikel erfahren Sie, wie Sie mithilfe von Vue feststellen können, ob sich ein Formular geändert hat.

1. Verwenden Sie das V-Modell, um Formulardaten zu binden.

Verwenden Sie in Vue die V-Modell-Anweisung, um Formulardaten an das Datenobjekt der Vue-Instanz zu binden. In einem Texteingabefeld können Sie beispielsweise die V-Model-Direktive verwenden, um den eingegebenen Wert an das Datenobjekt der Vue-Instanz zu binden. Wie unten gezeigt:

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '' // 创建一个名为name的数据属性
    }
  }
}
</script>

Der obige Code erstellt ein Texteingabefeld. Wenn sich der Wert des Eingabefelds ändert, ändert sich das Namensdatenattribut der Vue-Instanz entsprechend.

2. Verwenden Sie berechnete Attribute, um festzustellen, ob sich das Formular geändert hat.

Die Datenattribute in der Vue-Instanz können zum Speichern des aktuellen Werts des Formulars verwendet werden. Aber wie erkennt man, ob sich die Form geändert hat? Sie können die berechneten Eigenschaften von Vue verwenden, um dieses Problem zu lösen. Eine berechnete Eigenschaft ist eine spezielle Art von Eigenschaft in Vue, deren Wert aus anderen Dateneigenschaften berechnet wird. Im obigen Beispiel können Sie beispielsweise eine berechnete Eigenschaft erstellen, um den geänderten Status des Formulars zu bestimmen, wie unten gezeigt:

<template>
  <div>
    <input type="text" v-model="name">
    <p>表单是否改变: {{ isDirty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '', // 创建一个名为name的数据属性
      originalName: '' // 创建一个名为originalName的数据属性，用于保存原始值
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.originalName
    }
  },
  mounted() {
    this.originalName = this.name // 记录表单的原始值
  }
}
</script>

Im obigen Code haben wir eine berechnete Eigenschaft isDirty erstellt, die verwendet wird, um zu bestimmen, ob das Formular hat sich geändert. Der Wert einer berechneten Eigenschaft wird durch Vergleich des aktuellen Formularwerts mit dem ursprünglichen Formularwert berechnet. Um den ursprünglichen Formularwert zu speichern, erstellen wir außerdem ein Datenattribut originalName und setzen seinen Wert beim Mounten auf den Anfangswert von name. Wenn sich der Formularwert ändert, ändert sich auch der Wert der berechneten Eigenschaft isDirty.

3. Verwenden Sie watch, um Änderungen in Formularwerten zu überwachen.

Zusätzlich zu den berechneten Attributen bietet Vue auch ein weiteres spezielles Attribut, watch, zum Überwachen von Änderungen in Datenattributen. Das Überwachungsattribut kann Änderungen in einem oder mehreren Datenattributen überwachen und bestimmte Vorgänge ausführen, wenn sich die Daten ändern. Im Formular können wir das Watch-Attribut verwenden, um Änderungen im Formularwert zu überwachen, wie unten gezeigt:

<template>
  <div>
    <input type="text" v-model="name">
    <p>表单是否改变: {{ isDirty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '', // 创建一个名为name的数据属性
      originalName: '' // 创建一个名为originalName的数据属性，用于保存原始值
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.originalName
    }
  },
  mounted() {
    this.originalName = this.name // 记录表单的原始值
    this.$watch('name', (newValue, oldValue) => {
      if (newValue !== oldValue) {
        console.log('表单值改变')
        this.$emit('change') // 触发自定义事件change
      }
    })
  }
}
</script>

Im obigen Code haben wir ein Watch-Attribut erstellt, um Änderungen im Namensattribut zu überwachen und entsprechende Vorgänge auszuführen, wenn sich der Wert ändert . In diesem Beispiel wird die benutzerdefinierte Ereignisänderung ausgelöst, solange sich der Wert des Namensattributs ändert. Dieses Ereignis kann in der übergeordneten Komponente überwacht und verarbeitet werden.

4. Verwenden Sie den Befehl v-once, um den Anfangswert des Formulars zu speichern.

Es gibt eine andere Möglichkeit, den Anfangswert des Formulars zu speichern, und zwar die Verwendung des Befehls v-once. v-once ist eine Direktive in Vue. Ihre Funktion besteht darin, das Element beim ersten Binden einmal zu binden, und dann wird das Element nicht aktualisiert. Verwenden Sie die v-once-Direktive, um den Anfangswert des Formulars im Wertattribut des Texteingabefelds zu speichern. Wie unten gezeigt:

<template>
  <div>
    <input type="text" v-model="name" v-once:value="originalName">
    <p>表单是否改变: {{ isDirty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '' // 创建一个名为name的数据属性
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.$el.querySelector('input').value
    },
    originalName() {
      return this.name // 返回表单的初始值
    }
  }
}
</script>

Im obigen Code verwenden wir die v-once-Anweisung, um das Wertattribut des Eingabeelements zu binden und den Anfangswert im Wertattribut des Formularelements zu speichern. Mithilfe der berechneten Eigenschaft „originalName“ kann der Anfangswert zur Berechnung an die berechnete Eigenschaft „isDirty“ zurückgegeben werden, um festzustellen, ob sich das Formular geändert hat.

Zusammenfassung

In Vue ist die Feststellung, ob sich ein Formular geändert hat, eine sehr praktische Funktion. Sie kann verwendet werden, um den Benutzer aufzufordern, nicht gespeicherte Änderungen zu speichern, die Schaltfläche „Speichern“ zu deaktivieren oder zu aktivieren usw. Vue bietet viele Möglichkeiten, diese Funktionalität zu erreichen, z. B. die Verwendung von Dateneigenschaften, berechneten Eigenschaften, Überwachungseigenschaften und V-Once-Anweisungen. Die Wahl der geeigneten Methode hängt von den tatsächlichen Bedürfnissen und spezifischen Szenarien ab. Unabhängig davon, welche Methode verwendet wird, müssen Sie jedoch daran denken, den Anfangswert des Formulars zu speichern und den Status rechtzeitig zu aktualisieren, um festzustellen, ob sich das Formular geändert hat.

Das obige ist der detaillierte Inhalt vonVue stellt fest, ob sich das Formular geändert hat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!