javascript

Vue.jsのコンポーネント間で値の共有をする5つの方法

やりたいこと Vue.jsでコンポーネント間での値の共有をしたい。 親子関係問わず行えるとOK。 方法 主に以下の5つがありそう。 V-bind/Props/Emit State Management Library (etc: Vuex, Redux... EventHub/EventBus BrowserStorage (etc: localStorage, Inde…

firefoxのdrag, dragendイベントはclientX, clientYの値が0になる

環境 firefox: 61.0.1 (64-bit) 問題 ここのサイトの下の方のdemo 以下のdragイベントの'event'の中身を見ると document.addEventListener("drag", function( event ) { clientX, clientYの値が0になっている。 他のブラウザ chromeだとちゃんとclientX, cli…

vueのメソッドイベントハンドリングで引数にeventと任意の引数を渡す

やりたいこと vueのtemplateでイベントハンドリングするときに、引数でeventとその他の引数もメソッドへ渡したい。 方法 自分は以下の二通りを見つけた。 <button @click="handler($event, foo)"></button> <button @click="e => { handler(e, foo) }"></button> サンプル index.vue <template> <button @click="handler($event, foo)"></button> </template> <script> export default { data (…

vueでisomorphic-gitを利用する

やりたいこと vueでisomorphic-gitを利用する。 DBはブラウザのIndexedDBを利用。 必要なもの vue node npm isomorphic-git browserfs yarn (これはお好み) install 環境構築 $ yarn global add vue-cli # or $ npm i -g vue-cli $ vue init webpack nantoka…

vueでdomを参照したい

必要なこと 言語ブロックのtemplateの参照したいdomにrefを設定 言語ブロックのscriptでthis.$refsを使う $elについて this.$refs.hoge.$elにすることで、Elementを参照していることになる。 this.$refs.hoge.$el.firstElementChildみたいな書き方ができる。…

nuxt.jsのvuexのモジュールモードでlocalStorageに保存する

やりたいこと nuxt.jsでvuexのモジュールモードでlocalStorageに保存したい。 メモ vuexのstore.subscribeを使う モジュールモードの場合、store/index.jsにpluginを入れる 環境 nuxt.js vuex モジュールモード ブラウザのlocalStorageを使う ディレクトリ s…

nuxt.jsのvuexでmapGetter引数ありの書き方メモ

ひとこと これで多分できる store/hoge-module.js export const state = () => ({ todos: [ { id: 1, text: 'hoge' }, { id: 2, text: 'fuga' } ] }) export const getters = { getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id …

javascriptのfor書き方メモ

for文の書き方 最近いろいろと知ったのでメモを残しておきます 配列の中身を順次取り出す for const hoges = ['a', 'b', 'c'] for (let i = 0; i < hoges.length; i++) { console.log(hoges[i]) } for of const hoges = ['a', 'b', 'c'] for (const hoge of …