【個人メモ】 Vue.js+Vuetifyでのサンプル

vue.jsを勉強してていろいろ気になってChatGPTに聞いたことをメモ。

サンプルコード

App.vue

vue

<template>
  <v-container>
    <v-form ref="form">
      <v-checkbox
        v-model="isChecked"
        label="チェックボックス"
        @change="onCheckboxChange"
      />

      <v-text-field
        v-model="textBoxValue"
        :disabled="isChecked"
        :placeholder="isChecked ? 'チェックがオンです' : 'テキストボックス'"
        :rules="textBoxRules"
        required
      />

      <v-btn @click="handleSubmit">OK</v-btn>
    </v-form>
  </v-container>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      isChecked: false,
      textBoxValue: '',
      textBoxRules: [
        v => !!v || 'テキストボックスは必須です',
        v => !isNaN(v) || '数値を入力してください',
      ],
    };
  },
  async created() {
    try {
      const response = await axios.get('/api/data');
      const { year } = response.data;
      if (year === 9999 ) {
        this.isChecked = true;
        this.textBoxValue = '';
      } else {
        this.isChecked = false;
        this.textBoxValue = year.toString();
      }
    } catch (error) {
      console.error('データ取得エラー:', error);
    }
  },
  methods: {
    onCheckboxChange() {
      // チェックボックスの状態が変更されたときの処理
    },
    async handleSubmit() {
      const form = this.$refs.form;
      if (form.validate()) {
        const year = this.isChecked ? 9999 : parseInt(this.textBoxValue, 10);

        try {
          await axios.post('/api/register', { data: { year } });
          alert('データが送信されました');
        } catch (error) {
          console.error('送信エラー:', error);
          alert('データ送信に失敗しました');
        }
      } else {
        alert('フォームにエラーがあります');
      }
    },
  },
};
</script>

<style scoped>
/* スタイルは必要に応じて追加してください */
</style>

1. v-form コンポーネント:
ref="form" を使ってフォームの参照を取得します。この参照を使ってフォーム全体のバリデーションを実行します。

2. v-text-field コンポーネント:
:rules 属性にバリデーションルールを設定します。ここでは、値が空でないこと (!!v) と数値であること (!isNaN(v)) を確認しています。

3. handleSubmit メソッド:
this.$refs.form.validate() を使ってフォーム全体のバリデーションを実行します。
バリデーションが成功した場合にのみ、POSTリクエストを送信します。バリデーションエラーがある場合は、アラートを表示します。

Vueのライフサイクルフック

Vueコンポーネントには、いくつかのライフサイクルフックが存在します。これらのフックは、コンポーネントの異なる段階で自動的に呼び出され、適切なタイミングで特定の処理を行うことができます。以下は、主要なライフサイクルフックの一部です：

beforeCreate: コンポーネントが初期化される前に呼ばれる。
created: コンポーネントが初期化された後、テンプレートがレンダリングされる前に呼ばれる。
beforeMount: コンポーネントがマウントされる直前に呼ばれる。
mounted: コンポーネントがDOMにマウントされた後に呼ばれる。
beforeUpdate: データが変更され、DOMが更新される直前に呼ばれる。
updated: データが変更され、DOMが更新された後に呼ばれる。
beforeDestroy: コンポーネントが破棄される直前に呼ばれる。
destroyed: コンポーネントが破棄された後に呼ばれる。