Vuejs state中のデータを参照する時
先週にstate中のデータを呼び出してそのまま利用したんですが、consoleに怒られました。state中のデータを編集する時に 「this.$const.lodash.cloneDeep」を使ったら解決できる。
Nuxt.jsのルート自動生成
Nuxt.js だったら pages ディレクトリの下に.vueファイルを書くと、その名前のパスが自動で生成されます。
例えば:
pages/
index.vue
search.vue
login.vue
_detailnum/
index.vue
だと、index.vueはパス ' / 'に対応、search.vueは ' /search'に対応する。
例えば、search画面から各詳細の画面を確認する時にdetail.vueがその詳細データを表示させたい。ここで、search画面の詳細Linkのところに番号パラメータを指定する必要があります。例:<router-link class = "" :to="/row.number/"> row.numberは_detailnumに対応しています。detailnumの前に '_'を追加すればパラメータを受け取ることが可能です。
以上
VeeValidateのバリデーション実装する心得
1、VeeValidateとは
簡単に言うとユーザーによって入力された値が不正な場合に、リアルタイムにエラーを表示させる機能です。
2、 簡単な例
<validation-observer ref="obs" v-slot="{ invalid }">
<label>名前</label>
<validation-provider name="名前" rules="required">
<div slot-scope="ProviderProps">
<input v-model="name">
<p class="error">{{ errors[0] }}</p>
</div>
</validation-provider>
</validation-observer>
フォーム全体は<validation-observer>タグで囲む、inputのところに<validation-provider>タグで囲む。
3、実際のプロジェクトから学んだこと
上記のように一つ一つのinputをチェックするのが簡単ですが、複数のinputの結果によってバリデーションしたい時にはですが、<validation-provider>タグの中に複数のinputを入れても一番最初のinputだけチェックされている。
*そうしたら、複数のinputのv-modelを結合して、結合したinputに対してバリデーションすればうまくできそうです。ただ、結合したinputにはユーザーに見せてはいけないので、inputにtype = 'hidden'を追加し、また、すごく重要なところですが、<validation-provider>に : immediate='true' 属性を追加する必要があります。なぜなら、<validation-provider>タグには基本対象のinputがフォーカスされた時点から効くらしいですので、inputにtype = 'hidden'を追加したため、当然ユーザーがそのinputをクリックできないです。:immediate を追加すると、つまりすぐ効いてくださいみたいな命令ですね。しかし、そうすると、イニシャル画面で、エラーメッセージが表示されることになってしまいました。