Vue.jsでFormの各要素をComponent化する際の覚え書き - Qiita
2020/04/10 追記 Vue-Composition-API版を書きました。 ↓の記事のv-bind.syncを使うほうが実用的です。 Vue.jsでForm要素のラッパーコンポーネントを作る際の2つの方法（v-bind.sync, v-model） - Qiita Vue.jsでFormの各フィールドをcomponent化する際の実装例です。 コンポーネント化することで、デザイン、バリデーションなどが全Formで共通化できます。 流行りのAtomicデザインを適応する際などに良いかと思います。 以下コードは、全てこちらのリポジトリにあります。 https://github.com/kawamataryo/Vue-atomic-form Input まず基本のinputのcomponet実装例。 フィールドの値は、@inputで変更を監視して、$emitの'input'を利用し親コン
Nuxt.js: コンポーネントのファイル名にsuffixを付けるだけで、コンポーネントをどこからでも呼び出せるようにする - Qiita
Nuxt.js: コンポーネントのファイル名にsuffixを付けるだけで、コンポーネントをどこからでも呼び出せるようにするComponentNuxt よく使うコンポーネントは、いちいちimportして使うのは面倒なので、どこからでも呼び出せるようにしたい、 これまでは、pluginsディレクトリにコンポーネント登録用のファイルを置いて登録していたのだけれど、どのコンポーネントを追加したのか忘れてしまい、登録用のファイルを開いて確認する作業が地味に手間だった。 Githubをサーフィンしていたところ、コンポーネントのファイル名に「global」というサフィックスを付けるだけでどこからでも呼び出し可能にするプラグイン（@nuxtjs/global-components）が目に留まったので、試してみたところ非常に便利だったので紹介したい。 使い方は以下のとおり。 @nuxtjs/global-c
【Vuex】stateの変更を監視する3つの方法 | kawadeblog
現在バージョンアップ作業している所得税・住民税・事業税・国民健康保険計算シミュレーションは、Vuexを使用しています。その際に、stateの変更を監視したいケースが出てきたのでその方法をご紹介します。 今回の想定は、都道府県のセレクトコントロールがあり、その値をVuexのストアで管理しているケースです。画面はこんな感じのコントロール。いたって普通。 Vuexのstoreの中身はこちら。 const store = new Vuex.Store({ state: { prefecture: null }, getters: { prefecture(state) { return state.prefecture } }, mutations: { setPrefecture(state, payload) { state.prefecture = payload.prefecture }
computedを利用してVuexのstoreをwatch - 親バカエンジニアのナレッジ帳
storeの変更を検知したいパターン computedを利用するやり方 storeの変更を検知したいパターン Vue.jsでは状態を管理するのに便利なVuexのstoreですが、storeの値が変更されたタイミングでイベントを実行したくなる場面はありませんか？ 例えば別なコンポーネントで、非同期で値を取得するAPIを実行し、その結果をstoreに格納するパターンなどがありますね。 そのような時にどのように実装すれば良いのでしょうか。 computedを利用するやり方 僕の中ではcomputedを利用してstoreをwatchするやり方が一番扱いやすいかなという感想です。 記述は増えますが、シンプルな実装ができますね。 以下のようになります。 今回は例としてmoneyと定義したstoreを使います。 ※色々記述を飛ばしてcomputedとwatchしか書いてません笑 computed: {
Vuex and Typescript
Lately, Typescript is becoming more popular in the Javascript ecosystem and, by this post, I don’t want to dive deeply into Typescript but I would like to show a basic approach to integrate Vuex within a Vue application with a Typescript codebase. At this point, I assume you are familiar with basic Typescript approaches and how to use the language in a Vue application. In case you’d like to have a
TypeScriptでVuexを使うときのスタンダードっぽいやりかたを調べてみた - Qiita
この記事は オープンストリーム Advent Calendar 2018 の11日目の記事です。 うっかり期限を勘違いしていて前日に慌てて記事を書いています！間に合え！！ やりたいこと 最近やっと TypeScript と Vue.js を使い始めたので Vuex も一緒に使ってみたい。 とりあえず vue-cli でプロジェクトを作成すると、 store.ts ってファイルがぺろっと一つ追加される。けど、できれば1ファイルにべた書きするんじゃなくて、いいかんじに分けて書きたい。けど何をどう書けばいいのかよくわからない あとたぶん別の言語やって1ヶ月もしたら内容をすっぱり忘れるので、備忘録もほしい というわけで、調べてみた。 結論 ここにぜんぶ載ってた。すてき。 https://codeburst.io/vuex-and-typescript-3427ba78cfa8 ……なのですが。これ
Vue.jsのSSRではcreatedが2回実行される!?
Nuxt.jsなどのフレームワークを使えば、Vue.jsを用いたSSR（サーバーサイドレンダリング）のアプリケーションを簡単に作成することができます。ただし、どこまでがサーバーで実行され、どこからクライアントで実行されるのかを正しく理解しておかないと、期待通りのSSRにはなりません。タイトルでネタバレしていますが、今回はここを少しだけ掘り下げてみたいと思います。 Vue.jsのcreated、mounted、dataNuxt.jsの話の前に、そもそもVue.jsのライフサイクルフックとして用意されている created と mounted 、およびデータをリアクティブにする dataプロパティについて簡単に触れます。 created は、Vueインスタンスが作成された直後に呼ばれる関数で、Vueインスタンスの各種プロパティ、メソッドは利用できますが、レンダリングが完了していないため、エレメ
Nuxt.js(v2)で静的なJSONファイルを読み込み、いろんな所で使う。 - Qiita
Nuxt.jsで静的サイト(universal + generate)を作っているときに、タイトルやディスクリプション、ページのキャッチワード等のクオリティを上げるために、EXCELにひとまとめして管理したい。提案のときにも便利。 なので、EXCELを変換した静的なjsonファイルをいろんな所で使えるようにしておく。 １．Vuexで読み込んで使う。 Nuxt.jsで共通のデーターを使うならVuexが便利。ということで試してみる。 storeを作成 Nuxt.jsは、モジュールモードがお手軽に出来て最高。 import jsonData from '~/assets/json/data.json' // 状態管理 export const state = () => ({ data: jsonData, }) // getters export const getters = { getAl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsでvue-form-wizardを使ってステップフォームを実装してみました。 - Qiita
https://hafilog.com/execution-order