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>

chromeの開発者ツールでconsole was clearedが表示される

問題

chromeの開発者ツール(developer tool)のコンソールにconsole was clearedが表示される。

解決法

chrome://settings/reset にアクセスしてリセットする。

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

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>

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 hoges) {
  console.log(hoge)
}

forEach

const hoges = ['a', 'b', 'c']
hoges.forEach((hoge) => {
  console.log(hoge)
})

配列の中のObjectの一部を取り出す

for

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (let i = 0; i < items.length; i++) {
  console.log(items[i].hoge)
}

for of

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (const item of items) {
  console.log(item.hoge)
}

forEach

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
items.forEach((item) => {
  console.log(item.hoge)
})

for of + 分割代入

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (const { hoge } of items) {
  console.log(hoge)
}

forEach + 分割代入

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
items.forEach (({hoge}) => {
  console.log(hoge)
})

for of entries() : Array.prototype.entries() + 分割代入

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (const [index, { hoge }] of items.entries()) {
  console.log(hoge)
}

配列の添え字を取り出す

for

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (let i = 0; i < items.length; i++) {
  console.log(i)
}

forEach

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
items.forEach((item, index) => {
  console.log(index)
})

for of keys() : Array.prototype.keys()

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (const index of items.keys()) {
  console.log(index)
}

for of entries() : Array.prototype.entries()

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (const [index, item] of items.entries()) {
  console.log(index)
}

Objectの場合の備忘録

for in

const hoges = {
  hoge: 'a',
  fuga: 'b'
}
for (const item in hoges){
  console.log(item)
}

添え字の配列を取り出す Object.keys()

const hoge = ['a', 'b', 'c']
console.log(Object.keys(hoge))

KeyとValueの配列を取り出す

const items = {
  hoge: 'a',
  fuga: 'b'
}
console.log(Object.entries(items));

await async 非同期の備忘録

for await of

const asyncMethod = async () => {
  for await (const item of ['hoge', 'fuga']) {
    console.log(item);
  }
}
asyncMethod();