methods イベントハンドラーメソッド
最終更新：2026-10-22
methods イベントハンドラーメソッド
methods オプションはコンポーネントの関数を一括で宣言します。イベントハンドラーもユーティリティ関数もここに書き、テンプレートから名前で呼び出します。
| グループ | オプション: 状態 |
|---|---|
| 種類 | オプション |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
export default {
data() { return { count: 0 } },
methods: {
add(n) { this.count += n }
}
}⚙️ 引数
| value | オブジェクト：キーはメソッド名、値は関数（this はコンポーネントインスタンスを指します） |
|---|
戻り値：戻り値の規約はありません（戻り値はテンプレートの自動更新に反映されません）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The buttons add 1 and 5 respectively.💡 ポイント
⚠️ 注意 アロー関数は使わないでください。this がインスタンスにバインドされず、コンポーネントインスタンスにアクセスできません。
💡 ヒント テンプレートでは @click="add" のように関数参照を渡します（イベントオブジェクトが自動で渡ります）。引数が必要なときだけ括弧を書きます。
ℹ️ 補足 派生値には computed を優先し、methods は「振る舞い」を持つロジックのために残します。
🏷️ 関連状態
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q methods と computed はどう分担しますか？
A キャッシュしたい値・値として使う → computed。引数が必要・アクションを実行する → methods。
Q this が undefined になることがあるのはなぜですか？
A 多くの場合、アロー関数を使ったか、メソッドをインスタンスから取り出して単独で呼び出したことが原因です。
Q methods 内で別のメソッドを呼び出せますか？
A できます。this.other() のように呼べば、this は同じインスタンスを指します。
