Vue.jsでフォームの値リセットと再描画を行う方法

Vue.jsで複雑なフォームを扱っている際に、フォームの値をプログラム的にリセットする必要がある場合があります。しかし、単にデータモデルをリセットするだけでは、UI上のフォーム要素に反映されないことがあります。この記事では、Vue.jsでフォームの値をリセットし、UIにもきちんと反映させる方法を解説します。

問題の説明

Vue.jsでv-modelを使用してフォームの入力値とデータを双方向バインディングしている場合、データオブジェクトの値を変更しても、DOMが即座に更新されないことがあります。これはVueのリアクティブシステムとDOMの更新サイクルが原因です。

ソリューション

コンポーネントのキーを変更する
フォームやその他のコンポーネントを完全に再描画するために、コンポーネントのkeyを変更します。これにより、Vueはコンポーネントが新しいものと認識し、完全に再生成します。

vue

<template>
  <div :key="formKey">
    <my-form-component :form-data="formData"></my-form-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formKey: 0,
      formData: {
        // 初期フォームデータ
      }
    };
  },
  methods: {
    resetForm() {
      this.formData = {
        // フォームデータをリセット
      };
      this.formKey++; // キーをインクリメントして再描画をトリガー
    }
  }
}
</script>

まとめ

この記事では、Vue.jsを使用してフォームの値をプログラム的にリセットし、それをDOMに反映させる方法を紹介しました。