こんにちはフロントエンドエンジニアのまさにょんです!
今回は、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!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!