Entries from 2020-07-01 to 1 month
URLが動的に変わる場合、pagesのファイル名は「_hogehoge.vue」のように先頭に「_」アンダーバーをつける。 こうすることで_をつけたディレクトリやファイルがルートのパラメータとして扱えるようになる。 プラグインを使うときはインストールしてpluginsに…
プロパティdataここではidを設定したり、表示されるデータをとり扱う。 computedcomputedプロパティは、computedプロパティのなかに記述されている変数が変更された場合のみに実行される。それ以外の場合は1度実行してキャッシュしたデータが返される。関連…
VuexとはVuexとはvueで使われる、状態管理のためのライブラリポイントはアプリケーションの状態を一つの場所において管理するstore(ストア)というデータの入れ物を作り、各コンポーネントからストアにアクセスしてデータの出し入れを行うVuexの機能はAction,…
Vuetify使った場合、templateタグはclassでCSS適応できる。v-text-field ではtemplateの下にv-slot labelとせることでラベルをテキストフィードへ追加できる。 そもそもslotはVuetifyが作っていて、呼び出し側はそれをただ書けば良い。そのslotに何を書くか…
Vuetifyのrulesで、入力は非必須だけど、入力されればrules適応させたいみたいな時の書き方。 v => !v || !!v.match(hohefuga) || "エラー文" !vで「vが入力されていないケース」を表す。これによって 「入力されていない」もしくは「vが入力されていてhohef…
①ページを開いた時 よくデータの一覧ページなんかを開いた時にデータの一覧が画面いっぱいに出る時とかに使う。 ②データに何かしらの変更を加えた場合 アップデート、デリートなどでGraphQLを使ってデータを変更した場合に一連の変更処理が終わった時に変更…
GraphQLでデータを取得する時、 dataの中に色々入ってるけど、その中にあるデータをなんかの変数に代入したりする時は、そのデータはdata.getInvoiceみたいな書き方をしなくては行けない。 仮に全く同じデータ(真偽値で言うとTrue)の場合でも、ビュー側の持…
親コンポーネントで扱っているデータを子コンポーネントで書き換えると思わぬエラーやバグにつながるので、 データフローは必ず親→子の一方通行にする。 データを書き換える際には2通りのやり方がある。 ①子から$emitでプロパティを親へ渡す ②storeを使って…
読む時はqueryで読みたいプロパティを指定すれば読める。 書く時(追加する方法)は2通りある ①queryで定義してからクエリ変数で具体的な値を入力する ②mutationで直接追加したいプロパティへ値を入力する どっちでもいけるけど、mutationで追加できそうなやつ…
コンポーネントでバックエンドからデータをfetchすることは出来ない。 もしそうしたい時はpagesのビューのファイルでfetchしてから、propsで子コンポーネントへ渡すというやり方を使おうね。 (2020/07/15 追記) 最新のNuxtではコンポーネントからもデータのf…
Vuetifyのformのvalidationなんかで使うrulesプロパティの書き方が少し変わったらしい。 たとえば、必ず入力して欲しい欄があるとき v=>!!v || 'この欄は必ず入力してください' このように「!!v」とすることで「v」を純粋なBooleanの値にしなければいけない…