vue

Vueでのimport HogeComponent from 'hoge-component'は<template>で<hoge-component>と書ける

概要 vue: 2.5.17 parcel-bundler: 1.9.7 インポートでimport HogeComponent from './HogeComponent.vue';と書いたときに、 コンポーネントで以下のように書かなくても、 components: { 'HogeComponent': HogeComponent } 以下のように書いても動きます。 Ho…

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

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

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 …