Vue.js

v-for に key 属性を指定するときとしないときの違いの一例

先日、v-for に key 属性を指定しないことが原因で生じる不具合に遭遇しました。別にたいしたものではなんですが、v-for と key 属性の確認を兼ねて簡単にまとめます。 今日は v-for に :key を指定しないせいで起こる不具合に遭遇した— kntmr (@knt_mr) 201…

非同期でデータを取得する Vue.js のツリーコンポーネント

これを探してた / Tree View Example https://t.co/vv3JakWbTQ— kntmr (@knt_mr) 2018年7月25日 ツリー表示する方法を調べてたら Vue.js の公式サイトにいい感じのサンプルがありました。このサンプルではコンポーネントを再帰することでツリーを実現してい…

Vue.js で ToDo アプリを作る (Firebase Realtime Database 編)

前回の続き Vue.js で ToDo アプリを作る - kntmr-blog 前回作成した ToDo アプリはデータを LocalStorage に保存していましたが、今回は Firebase Realtime Database に保存するようにしました。また、Vuex の Plugins は使わず、mutations のところで stat…

Vue.js で ToDo アプリを作る

以前、PWA の学習を兼ねて、Firebase にデプロイしたアプリを PWA 化してみる計画を立てたのですが、対象のアプリがイマイチなので、その代わりに Vue.js で ToDo アプリを作りました。 今のところ ToDo のデータは LocalStorage に保存するようにしています…

Vue.js アプリを Firebase にデプロイしてみる

Firebase を使ってみようと思います。ひとまず、以下の続編としてアプリを Firebase にデプロイしてみようかと。 Vue.js でウィジェットっぽいもの (仮) その2 - kntmr-blog ソースコードはこちら。 github.com 以下、備忘録。 Firebase Console Firebase Co…

Vue.js + Vuex + axios を使うときに考えたことや反省点など

とあるプロジェクトで Vue.js + Vuex + axios を適用してみました。調べたことや自分なりに考えたこと、反省点を残しておこうかと。 前提 それぞれのバージョンは以下の通り。 "dependencies": { "axios": "^0.17.1", "es6-promise": "^4.1.1", "vue": "^2.5…

vue-cli の webpack テンプレートでテスト環境向けにビルドしたい

※手元の環境は vue-cli@2.9.1 です。 細かく言うと、dev.env.js や prod.env.js の他に、テスト環境向けの config が欲しいということです。ちなみに「テスト環境」とは、ローカル以上、プロダクション未満のような環境を指しています。 で、stg.env.js のよ…

Avoriaz で filters や methods の中身を差し替える

前回の続編。用途があるか不明ですが、こんな感じでできそうという話。 kntmr.hatenablog.com filters を差し替える 例えば、こういうコンポーネントがあって、期待する値が出力されるかテストするパターン。ここでは、グローバルフィルターが設定されている…

Avoriaz と Sinon.JS で methods のメソッドが呼ばれたことをテストする

このあたりを調べたときのメモ。 avoriaz@6.3.0 sinon@4.0.0 例えば、こういうコンポーネントがあって、ボタンクリック時のイベントハンドラを methods のメソッドにバインドしているものとする。 <template> <div> <button @click="onClick">Submit</button> </div> </template> <script> export default { name: 'AvoriazTest', method</script>…

コンポーネントの props で required を付けるときは default を定義した方がよさそう

小ネタですみませんが、Vue.js #4 Advent Calendar 2017 の15日目が空いてたので書きます。最近、Vue.js を実案件で使い始めました。Vue.js 歴は浅いです。 タイトルの通りなんですが、誤りや本来はこうあるべきというのがあればご指摘いただけますと幸いで…

Vue.js でウィジェットっぽいもの (仮) その2

前回の続き Vue.js でウィジェットっぽいものを作ってみる (仮) - kntmr-blog 続編として今回は以下をやってみようかと。 Webpack で出力するファイルをまとめる ウィジェットにパラメータを渡せるようにする 任意のタグ/キーワードで表示できるようにする W…

Vue.js でウィジェットっぽいものを作ってみる (仮)

Qiita Widget : Qiitaの投稿を表示できるブログパーツ こんな感じのウィジェットっぽいものを、Vue.js と Veux の学習を兼ねて作ってみようかと。今回は Qiita の Vue.js タグを表示するもの。 github.com 以下、備忘録。 vue-cli vue-cli の Webpack テンプ…

Bootstrap と Vue.js で簡単なモックアップを作る

以前、Bootstrap ベースのモックアップについて書きました。 Bootstrap を利用して簡単なモックアップを作る - kntmr-blog で、今回は Bootstrap + Vue.js 版のモックアップを作ってみました。モックアップとしての内容は Bootstrap 版と同じです。Vue.js と…