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, clientYが取得できる。

対応状況

ここを見ると9年前から話題になっている。

解決案

jQuery UI draggable eventを使う
ここのjsfiddleでdraggableのdragイベントを見る
drag event で取得した中身のoriginalEventにはclientX, clientYがfirefoxでも入ってる!!!
だけどdrag eventを、mousemove eventで補っているっぽい

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 () {
    return {
      foo: 'bar'
    }
  }
  methods: {
    handler (event, foo) {
       console.log(event, foo)
    }
  }
}
</script>
<template>
  <div>
    <ul>
      <li v-for="(word, index) of words" :key="index"
        @click="e => { handler(e, word) }">
        {{ word }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      words: ['a', 'd', 'c', 'd', 'e']
    }
  },
  methods: {
    handler (e, word) {
      console.log(e, word)
    }
  }
}
</script>

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 nantokakantoka-project
$ cd nantokakantoka-project
$ yarn     # or $ npm i

使いたいモジュールをinstall

$ yarn add isomorphic-git
$ yarn add browserfs

src/App.vue を以下に変更

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  async mounted () {
    const git = require('isomorphic-git');
    const BrowserFS = require('browserfs');
    BrowserFS.configure({ fs: "IndexedDB", options: {} }, function (err) {
      if (err) return console.log(err)
      const fs = BrowserFS.BFSRequire("fs")
      const files = git.listFiles({fs, dir: '/'})
      console.log(files)
    })
  },
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

実行

$ yarn dev

config/index.jsのmodule.exportsのdevのportを確認(自分は8080)
http://localhost:8080にブラウザでアクセス
ブラウザのコンソールを確認

注意

importを使うと、何故かだめだったので、requireで利用

import git from 'isomorphic-git'
import BrowserFS from 'browserfs'

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

const git = require('isomorphic-git');
const BrowserFS = require('browserfs')

作成したリポジトリ

github.com

vueでdomを参照したい

必要なこと

  • 言語ブロックのtemplateの参照したいdomにrefを設定
  • 言語ブロックのscriptでthis.$refsを使う

$elについて

this.$refs.hoge.$elにすることで、Elementを参照していることになる。
this.$refs.hoge.$el.firstElementChildみたいな書き方ができる。

注意

this.$refs.hoge.$elでElementを参照できる場合と、
this.$refs.hogeElementを参照できる場合がある

this.$refs.hogeの場合

tempalte言語ブロックのrefをインラインで書いたdomがカスタムエレメントでない場合

<div ref="foo"></div>
mounted () {
  console.log(this.$refs.foo)
}

this.$refs.hoge.$elの場合

template言語ブロックのrefをインラインで書いたdomがカスタムエレメント(importしたcomponent)?の場合

<my-element ref="foo"></my-element>
mounted () {
  console.log(this.$refs.foo.$el)
},
comopnents: {
  'my-element': myElement
}

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

やりたいこと

nuxt.jsでvuexのモジュールモードでlocalStorageに保存したい。

メモ

  • vuexのstore.subscribeを使う
  • モジュールモードの場合、store/index.jsにpluginを入れる

環境

  • nuxt.js
  • vuex
    • モジュールモード
  • ブラウザのlocalStorageを使う

ディレクト

  • store/
    • index.js
    • todos.js
  • pages/
    • index.vue

store/index.js

const localStoragePlugin = store => {
  store.subscribe((mutation, { todos }) => {
    window.localStorage.setItem('todos', JSON.stringify(todos))
  })
}

export const plugins = [ localStoragePlugin ]

store/todos.js

export const state = () => ({
  todos: {}
})

export const mutations = {
  setTodo (state, { content }) {
    state.todos = content
  }
}

pages/index.vue

<script>
export default {
  mounted () {
    this.$store.commit('todos/setTodo', { content: 'hoge' })
  }
}
</script>

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 === id)
  }
}

pages/hoge.vue

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      todo: 'hoge-module/getTodoById'
    })
  },
  methods: {
    showTodo () {
      console.log(this.todo(1))
    }
  }
}

</script>