Vueで v-modelの CheckBoxの値が Updateされたら、特定の処理を実行する方法

v-model_update

こんにちはフロントエンドエンジニアのまさにょんです!

今回は、Vueで v-modelの CheckBoxの値が Updateされたら、特定の処理を実行する方法について解説していきます。

Vueで v-modelの CheckBoxの値が Updateされたら、特定の処理を実行する

Vueでv-modelの CheckBoxの値が Updateされたら、特定の処理を実行するには、

次のSampleCodeのように@changeイベントを利用して特定のメソッドを呼び出すことで対応できます。

<template>
  <div>
    <!-- 1. v-model & @changeで、変更によって、メソッドを Call する  -->
    <input type="checkbox" v-model="isChecked" @change="handleCheckboxChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      /** v-modelで、連携しているData */
      isChecked: false,
    };
  },
  methods: {
    /** CheckBox_Change_Event_Call_Method */
    handleCheckboxChange() {
      // チェックボックスの値が変更された際に実行する処理を記述
      if (this.isChecked) {
        // チェックされた場合の処理
        console.log("チェックされました");
        // ここに追加の処理を書く
      } else {
        // チェックが外された場合の処理
        console.log("チェックが外されました");
        // ここに追加の処理を書く
      }
    },
  },
};
</script>

上記では、@change イベントが発生した際にhandleCheckboxChangeメソッドが、Callされます。

v-model@changeを併用することで、v-modelでバインドしている連携 Dataが更新されるたびに、特定の処理を実行することができます。

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

Twitterやってます!Follow Me!

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!

最近の投稿