Vuejs

A collection of 2 posts

VueのDataにファンクションをセット
Vuejs

VueのDataにファンクションをセット

Vueで、今まで全然気がつかなかったというか使ってなかったというかこんな使い方ができたのね😅 アプリ共通の関数ってやっぱ必ずありますよね。 Vueの基盤オブジェクトを作っておいてextendするような実装を今までしてたけど、ありモノをそのまま使いたいとかもあるじゃないですか。momentとかunderscoreとか。 今までは、結局、Vueの基盤オブジェクトを作ってそこにラップした関数を定義してたわけですよ。 仮に以下のような使い回ししたい関数があった場合。 $myfunctions = { parsehoge: function(val) { /* ゴニョゴニョ */ }, formathoge: function(val) { /* ゴニョゴニョ */ }, } 今までは... $vuebase = { methods: { parsehoge: function(val) { return $myfunctions.parsehoge(val); }, formathoge:

VuejsからスレッドセーフにjQueryでの操作を行う
Javascript

VuejsからスレッドセーフにjQueryでの操作を行う

Vuejsの仮想DOMがレンダリングされる前にjQueryでのDOM操作を行うとスレッドセーフではないので色々と問題が発生する。よくsetTimeoutで実行を遅らせたりするのを見かけるが、クライアント環境でうまく行ったり行かなかったり。 全てにおいて完全と言うわけではないが、VuejsにはnextTickという仮想DOM構築後のコールバックがあるのでそれを利用してjQueryの操作を行うという技。 onEditClick: function (event) { //Vue側のDOM変更が入る操作; .... this.$nextTick(() => { //jQueryでDOM変更が入る操作 $('#foo').hide(); $('#hoge').show(); }); },