Entries from 2020-07-01 to 1 month

Nuxtの動的URL

URLが動的に変わる場合、pagesのファイル名は「_hogehoge.vue」のように先頭に「_」アンダーバーをつける。 こうすることで_をつけたディレクトリやファイルがルートのパラメータとして扱えるようになる。 プラグインを使うときはインストールしてpluginsに…

Vueの主要なプロパティ・ディレクティブまとめ

プロパティdataここではidを設定したり、表示されるデータをとり扱う。 computedcomputedプロパティは、computedプロパティのなかに記述されている変数が変更された場合のみに実行される。それ以外の場合は1度実行してキャッシュしたデータが返される。関連…

Vuexの簡単なまとめ

Vue

VuexとはVuexとはvueで使われる、状態管理のためのライブラリポイントはアプリケーションの状態を一つの場所において管理するstore(ストア)というデータの入れ物を作り、各コンポーネントからストアにアクセスしてデータの出し入れを行うVuexの機能はAction,…

Vuetify CSSの適応方法

Vuetify使った場合、templateタグはclassでCSS適応できる。v-text-field ではtemplateの下にv-slot labelとせることでラベルをテキストフィードへ追加できる。 そもそもslotはVuetifyが作っていて、呼び出し側はそれをただ書けば良い。そのslotに何を書くか…

Vuetifyのrules(入力は非必須だが入力されればrules適応させたい)

Vuetifyのrulesで、入力は非必須だけど、入力されればrules適応させたいみたいな時の書き方。 v => !v || !!v.match(hohefuga) || "エラー文" !vで「vが入力されていないケース」を表す。これによって 「入力されていない」もしくは「vが入力されていてhohef…

fetchの使い分け

①ページを開いた時 よくデータの一覧ページなんかを開いた時にデータの一覧が画面いっぱいに出る時とかに使う。 ②データに何かしらの変更を加えた場合 アップデート、デリートなどでGraphQLを使ってデータを変更した場合に一連の変更処理が終わった時に変更…

GraphQLの返り値

GraphQLでデータを取得する時、 dataの中に色々入ってるけど、その中にあるデータをなんかの変数に代入したりする時は、そのデータはdata.getInvoiceみたいな書き方をしなくては行けない。 仮に全く同じデータ(真偽値で言うとTrue)の場合でも、ビュー側の持…

Vueのデータフローは親→子の一方通行

親コンポーネントで扱っているデータを子コンポーネントで書き換えると思わぬエラーやバグにつながるので、 データフローは必ず親→子の一方通行にする。 データを書き換える際には2通りのやり方がある。 ①子から$emitでプロパティを親へ渡す ②storeを使って…

AWS Amplify GraphQLのクエリの読み書き

読む時はqueryで読みたいプロパティを指定すれば読める。 書く時(追加する方法)は2通りある ①queryで定義してからクエリ変数で具体的な値を入力する ②mutationで直接追加したいプロパティへ値を入力する どっちでもいけるけど、mutationで追加できそうなやつ…

コンポーネントでfetchは出来ない

コンポーネントでバックエンドからデータをfetchすることは出来ない。 もしそうしたい時はpagesのビューのファイルでfetchしてから、propsで子コンポーネントへ渡すというやり方を使おうね。 (2020/07/15 追記) 最新のNuxtではコンポーネントからもデータのf…

Vuetifyのrulesの書き方が少し変わったよ

Vuetifyのformのvalidationなんかで使うrulesプロパティの書き方が少し変わったらしい。 たとえば、必ず入力して欲しい欄があるとき v=>!!v || 'この欄は必ず入力してください' このように「!!v」とすることで「v」を純粋なBooleanの値にしなければいけない…