Vue.jsのメソッド内で別のメソッドを呼び出す
ネイティブのJavaScriptと同じ書き方ではエラーになる
ネイティブのJavaScriptと同じ感覚で関数名だけで呼び出すと、not definedエラーが発生します。
methods: {
hoge: function() {
hogehoge(); // not defined
},
hogehoge: function () {
console.log('Hello');
}
}Options APIでの解決方法（Vue 2 / Vue 3共通）
Vue.jsのOptions APIでは、宣言したメソッドはVueインスタンス上に存在するため、thisを使って呼び出します。この書き方はVue 2でもVue 3でも同じです。
methods: {
hoge() {
this.hogehoge(); // Hello
},
hogehoge() {
console.log('Hello');
}
}Composition APIでの書き方（Vue 3）
Vue 3のComposition API（<script setup>）では、関数は通常のJavaScriptと同じスコープに定義されるため、thisを使わずにそのまま呼び出せます。
<script setup>
function hoge() {
hogehoge(); // Hello
}
function hogehoge() {
console.log('Hello');
}
</script>Options APIで必要だったthisが不要になり、ネイティブのJavaScriptに近い書き方ができるのがComposition APIの特徴のひとつです。
関連記事
Web制作 3月6日
ブログサイトにAstroを選んだ理由 ― WordPressだけが選択肢じゃない
このサイトのブログはWordPressではなくAstroという静的サイトジェネレーターで構築しています。なぜWordPressを使わなかったのか、Astroとは何か、どんなサイトに向いているのかを、実際に運用している立場からまとめました。
続きを読む
業務効率化 2月27日
テレワークで仕事の効率を高めるためのコツ
テレワーク環境で生産性を維持・向上させるための具体的なコツを紹介します。生活リズムの管理、タスク管理、仕事環境の整備、テキストコミュニケーションの注意点まで、実践しやすいものをまとめました。
続きを読む
Wordpress 2月27日
WordPressのクエリを正しく扱う ― pre_get_postsの仕組みと使い分け
WordPressのメインクエリを安全にカスタマイズするpre_get_postsの仕組みと使い方を解説します。query_postsが非推奨とされる理由や、WP_Queryとの使い分けなど、WordPress開発で押さえておきたいクエリの基本を整理します。
続きを読む