Vue détermine si le formulaire a changé

Vue est l'un des frameworks front-end les plus populaires pour créer des applications Web interactives. Dans Vue, les formulaires sont l'une des fonctionnalités principales. Les formulaires sont des éléments HTML utilisés pour collecter les données des utilisateurs. Ils peuvent contenir différents types d'éléments de formulaire, tels que des zones de saisie de texte, des listes déroulantes, des boutons radio, des cases à cocher, etc. Cependant, une fonction très pratique de Vue consiste à déterminer si le formulaire a changé, ce qui peut généralement être utilisé pour effectuer certaines opérations, comme inviter l'utilisateur à enregistrer les modifications non enregistrées, désactiver ou activer le bouton d'enregistrement, etc. Dans cet article, nous explorerons comment utiliser Vue pour déterminer si un formulaire a changé.

1. Utilisez v-model pour lier les données du formulaire

Dans Vue, utilisez l'instruction v-model pour lier les données du formulaire à l'objet de données de l'instance Vue. Par exemple, dans une zone de saisie de texte, vous pouvez utiliser la directive v-model pour lier la valeur saisie à l'objet de données de l'instance Vue. Comme indiqué ci-dessous :

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

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

Le code ci-dessus créera une zone de saisie de texte Lorsque la valeur de la zone de saisie change, l'attribut de données de nom de l'instance Vue changera également en conséquence.

2. Utilisez les attributs calculés pour déterminer si le formulaire a changé

Les attributs de données dans l'instance Vue peuvent être utilisés pour enregistrer la valeur actuelle du formulaire. Mais comment savoir si la forme a changé ? Vous pouvez utiliser les propriétés calculées de Vue pour résoudre ce problème. Une propriété calculée est un type spécial de propriété dans Vue dont la valeur est calculée à partir d'autres propriétés de données. Par exemple, dans l'exemple ci-dessus, vous pouvez créer une propriété calculée pour déterminer l'état modifié du formulaire, comme indiqué ci-dessous :

<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>

Dans le code ci-dessus, nous avons créé une propriété calculée isDirty, qui est utilisé pour déterminer le formulaire s'il faut changer. La valeur d'une propriété calculée est calculée en comparant la valeur actuelle du formulaire avec la valeur du formulaire d'origine. Afin de sauvegarder la valeur du formulaire d'origine, nous créons également un attribut de données originalName et définissons sa valeur sur la valeur initiale de name lors du montage. Lorsque la valeur du formulaire change, la valeur de la propriété calculée isDirty change.

3. Utilisez watch pour surveiller les changements dans les valeurs du formulaire

En plus des propriétés calculées, Vue fournit également une autre propriété spéciale, watch, pour surveiller les changements dans les propriétés des données. L'attribut watch peut surveiller les modifications apportées à un ou plusieurs attributs de données et effectuer des opérations spécifiques lorsque les données changent. Dans le formulaire, nous pouvons utiliser l'attribut watch pour surveiller les changements dans la valeur du formulaire, comme indiqué ci-dessous :

<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>

Dans le code ci-dessus, nous avons créé un attribut watch pour surveiller les changements dans l'attribut name, et lorsque la valeur change Effectuez l'action appropriée. Dans cet exemple, tant que la valeur de l'attribut name change, le changement d'événement personnalisé sera déclenché. Cet événement peut être surveillé et traité dans le composant parent.

4. Utilisez la commande v-once pour enregistrer la valeur initiale du formulaire

Il existe une autre façon de sauvegarder la valeur initiale du formulaire, et c'est d'utiliser la commande v-once. v-once est une directive dans Vue. Sa fonction est de lier l'élément une fois lors de sa première liaison, puis l'élément ne sera pas mis à jour. Utilisez la directive v-once pour enregistrer la valeur initiale du formulaire dans l'attribut value de la zone de saisie de texte. Comme indiqué ci-dessous :

<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>

Dans le code ci-dessus, nous utilisons l'instruction v-once pour lier l'attribut value de l'élément d'entrée et enregistrer la valeur initiale dans l'attribut value de l'élément de formulaire. À l’aide de la propriété calculée originalName, la valeur initiale peut être renvoyée à la propriété calculée isDirty pour un calcul permettant de déterminer si le formulaire a changé.

Summary

Dans Vue, juger si le formulaire a changé est une fonction très pratique, qui peut être utilisée pour proposer à l'utilisateur de sauvegarder les modifications non enregistrées, de désactiver ou d'activer la sauvegarde bouton, etc. Vue propose de nombreuses façons d'obtenir cette fonctionnalité, telles que l'utilisation de propriétés de données, de propriétés calculées, de propriétés de surveillance et de directives v-once. Le choix de la méthode appropriée dépend des besoins réels et des scénarios spécifiques. Mais quelle que soit la méthode utilisée, vous devez vous rappeler de sauvegarder la valeur initiale du formulaire et de mettre à jour le statut à temps pour déterminer si le formulaire a changé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!