Vue はフォームが変更されたかどうかを判断します

Vue は、インタラクティブな Web アプリケーションを構築するための非常に人気のあるフロントエンド フレームワークの 1 つです。 Vue では、フォームは中心的な機能の 1 つです。フォームは、ユーザーからデータを収集するために使用される HTML 要素です。テキスト入力ボックス、ドロップダウン リスト、ラジオ ボタン、チェック ボックスなど、さまざまなタイプのフォーム要素を含めることができます。ただし、Vue の非常に実用的な機能は、フォームが変更されたかどうかを判断することであり、これは通常、ユーザーに未保存の変更の保存を求めるプロンプト、保存ボタンの無効化または有効化など、いくつかの操作を実行するために使用できます。この記事では、Vue を使用してフォームが変更されたかどうかを確認する方法を説明します。

1. v-model を使用してフォーム データをバインドする

Vue では、v-model ディレクティブを使用してフォーム データを Vue インスタンスのデータ オブジェクトにバインドします。たとえば、テキスト入力ボックスでは、v-model ディレクティブを使用して、入力された値を Vue インスタンスのデータ オブジェクトにバインドできます。以下に示すように:

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

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

上記のコードはテキスト入力ボックスを作成します。入力ボックスの値が変更されると、Vue インスタンスの name データ属性もそれに応じて変更されます。

2. 計算されたプロパティを使用してフォームが変更されたかどうかを判断する

Vue インスタンスのデータ プロパティを使用して、フォームの現在の値を保存できます。しかし、フォームが変更されたかどうかをどうやって判断するのでしょうか? Vue の計算プロパティを使用すると、この問題を解決できます。計算プロパティは、値が他のデータ プロパティから計算される Vue の特別なタイプのプロパティです。たとえば、上記の例では、以下に示すように、計算プロパティを作成して、フォームの変更されたステータスを判断できます。

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

上記のコードでは、計算プロパティ isDirty を作成しました。フォームが変更されたかどうかを判断します。計算されたプロパティの値は、現在のフォーム値と元のフォーム値を比較することによって計算されます。元のフォームの値を保存するために、データ属性originalNameも作成し、マウント時にその値をnameの初期値に設定します。フォームの値が変更されると、isDirty 計算プロパティの値も変更されます。

3. watch を使用してフォーム値の変更を監視する

計算されたプロパティに加えて、Vue はデータ プロパティの変更を監視するための別の特別なプロパティ、watch も提供します。 watch 属性は 1 つ以上のデータ属性の変更を監視し、データが変更されたときに特定の操作を実行できます。以下に示すように、フォームでは、watch 属性を使用してフォーム値の変更を監視できます。

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

上記のコードでは、name 属性の変更を監視するための watch 属性を作成し、値が変化したときの対応するアクション。この例では、name 属性の値が変更される限り、カスタム イベントの変更がトリガーされ、このイベントは親コンポーネントで監視および処理できます。

4. v-once コマンドを使用してフォームの初期値を保存する

フォームの初期値を保存する別の方法があります。それは、v-once コマンドを使用することです。指示。 v-once は Vue のディレクティブで、その機能は要素を最初にバインドするときに要素を 1 回バインドすることであり、その後は要素は更新されません。 v-once ディレクティブを使用して、フォームの初期値をテキスト入力ボックスの value 属性に保存します。以下に示すように:

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

上記のコードでは、v-once 命令を使用して input 要素の value 属性をバインドし、初期値を form 要素の value 属性に保存します。計算プロパティoriginalNameを使用すると、フォームが変更されたかどうかを判断するための計算のために初期値をisDirty計算プロパティに返すことができます。

概要

Vue では、フォームが変更されたかどうかを判断する機能が非常に実用的で、未保存の変更を保存したり、保存ボタンを無効または有効にするなどのプロンプトをユーザーに表示するために使用できます。 Vue には、データ プロパティ、計算プロパティ、監視プロパティ、v-once ディレクティブの使用など、この機能を実現するためのさまざまな方法が用意されています。適切な方法の選択は、実際のニーズと特定のシナリオによって異なります。ただし、どの方法を使用する場合でも、フォームの初期値を保存し、フォームが変更されたかどうかを判断するために適時にステータスを更新することを忘れないでください。

以上がVue はフォームが変更されたかどうかを判断しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。