【Vue.js】middlewareやplugins, fetchなどの実行順序

こんにちは、”はふぃ”です。 Vueアプリケーションを作っているとmiddlewareやplugins、fet […]

【Vue.js】injectしたメソッドの中で他のinjectされた処理を使う方法

こんにちは、”はふぃ”です。 Vue.jsアプリケーションのNuxt.jsで使われるinjectという処理をご […]

【Vue.js】スムーズにスクロールするアンカーリンクの使い方

aタグを使えば動作するのですが、せっかくならページリロードなしのnuxt-linkを使いたいですし、かといってその度に動作するかテストするのも大変です。さらに言えばアニメーションもつけてスムーズなスクロールにしたい…。
そこで、Vue.jsでスムーズにスクロールするアンカーリンクを実装する方法について説明したいと思います。

【Vue.js】コンポーネントの表示状態を監視する方法

v-showではv-ifと違って、cssのdisplay: noneを使って表示制御をしておりコンポーネントは常に存在する状態なので、先ほどのライフサイクルフックを利用した方法は使うことができません。
そこでresize-observer-polyfillというnpmパッケージを利用します。

【Vue.js】storeのstateが更新されたことを検知する方法

Vue.jsでFormなどを利用して動的に値が更新された場合、computedやwatchを利用することでその変更を検知することができます。
では、storeの値が動的に変更された場合はどうでしょう?
今回はstoreのstateの値が動的に更新された場合にそれを検知する方法が何パターンかあるので説明します。

【Vue.js】子コンポーネントから親コンポーネントにデータを受け渡す方法

子コンポーネントから親コンポーネントへは$emitでデータを受け渡すことが可能ですが、孫コンポーネント(子コンポーネントの子)から親コンポーネントのメソッドを呼ぶには、$emitを2度使ってデータを孫 → 子 → 親と渡す必要があります。その際に$listenersを利用することでより分かりやすく記述することが可能です。

【Vue.js】dataプロパティでの_(アンダースコア)の扱い

上記の公式ドキュメントにも書いてあるように、Vue.jsのdataのプロパティでは_(アンダースコア)から始まる変数を使うことはできません!(this.$dataとすることで使えますが)