Vue

v-validateで値変更後にバリデーションする

$nextTickを利用するやり方 @input="v => { change(v) $nextTick(() => $validator.validate('xxx')) }" $nextTickはDOMの更新後に実行されるため、inputでDOM要素が変更されたあとに任意のvalidate処理を実行することが出来る

computedの中でdataを書き換えるとエラーになる: vue/no-side-effects-in-computed-properties

Vue

事例 computedの中でdataを書き換えると vue/no-side-effects-in-computed-properties というエラーが出る 公式によると、computedがこのような副作用を持つと、可読性が悪くなりかつ予測不可能になりやすいため たしかにcomputedが動いたときに毎回値自体が…

v-ifとv-showの違いと使い方の注意について

Vue

レンダリングの違い v-ifはfalseの場合は何もレンダリングされない v-showは条件に関わらずレンダリングされて、シンプルな CSS ベースの切り替えとして保存される そのため、例えば値を取得してから描画しないとエラーになる場合などは、v-ifで値をチェック…

computedは非同期処理をサポートしていないため、watchを使用する

Vue

computedは非同期処理をサポートしていない 公式サイトより watch オプションを利用することで、非同期処理( API のアクセス)の実行や、処理をどのくらいの頻度で実行するかを制御したり、最終的な answer が取得できるまでは中間の状態にしておく、といった…

Vue.jsで親コンポーネントから子コンポーネントの要素にスタイルを適用させる方法と注意点

親コンポーネントから子コンポーネントの要素にスタイルを適用させる方法 ディープセレクタ>>>を使用する <style scoped> .a >>> .b { /* ... */ } </style>` 注意 Sassなどでは上記のディープセレクタが効かない場合がある。 その場合は/deep/か::v-deepを使う。 参考 vue-loader.…

Vueでグローバル定数ファイルを定義するベストプラクティスが議論されていたのでメモ

Vue

stackoverflow.com 自分は上記記事を参考にして以下のようにしました 。 外部から変更できない変数を宣言してexport し、使う側でimport する方法です。 constフォルダ等(定数と分かるフォルダ名)を用意して各定数ファイルを用意すると、一目で定数ファイ…

Vueで外部JavaScriptファイルを読み込む方法

Vue

コード例 outside.js const VALUE = 1 export default Object.freeze({ VALUE: VALUE }); any.Vue <script> import outside from 'path/to/outside' // .js(拡張子の指定)は必要ない ... mounted() { // importしたjsの変数 console.log(outside.VALUE) // 1 }, 補…

computedでネストしたObjectの値変更を検知する

Vue

computedは基本ネストしたObjectの値までは検知しない。 検知するためには、Vue.setを使用する。 Vue.set(object, propertyName, value) https://jp.vuejs.org/v2/guide/reactivity.html

Vuexのactionsに3つ以上の引数を渡すには?

Vue

mutations, actionsは第一引数にstate,指定されていれば第二引数にpayloadを受け取る仕様になっている。 そのため、多くの引数を渡したい場合には、オブジェクトにまとめて第二引数として渡す必要がある。 // ダメな例 呼び出す側 this.アクションメソッド(x…