子コンポーネント button-mark.vue<template> // {{ name }}を追加して表示させる<button v-on:click="mark = mark + \'!\'">Hello {{ name }}{{ mark }}</button></template> <script>export default{props: ['name'], // propsで’name’を列挙data: function () {return {mark: '!'}},}</script> 続いて親コンポーネント main.vue<template><p></p></template>

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

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

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

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

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

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

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