9/1-Nuxt.js調査

■■
components/
menu/list
→リストアイテムの表示と画面遷移を担うファイル

v-forでリストのアイテムを配列から取得して、
devider(意味ごとに作る棒線)を付与しながら表示。

全てitemオブジェクトの中に入ってるが、
item.icon,item.text,item.headingなどが表示担当。
itemオブジェクトは、scriptのdata()にて定義している

@clickのアクションは、

• $router.push(item.location)で画面遷移
• zendeskは、zendesk()

複雑な部分は、loginzendeskの部分。実際に叩きに行くurl生成の部分だったり、
loginZendesk,logoutのセッション部分か。

■
dialogs/confirm
→削除とか色々な動作の確認ダイアログ画面のcomponent部品の中身

v-modelにvisibleDialogを入れて、動的にダイアログ生成を制御している。
get() {
  return this.visible && this.dialogId === this.id()
},
set(value) {
  this.hide()
}

this.$emit(this.clickEvent)
コンポーネント間のデータのやり取りにおける、親子関係とprops,emit

「コンポーネント間のデータのやり取り」では「親から子」にdataを伝達する手段「props」、そして「子から親」にdataを伝達する手段「emit」が存在します。

@submit.native.prevent
→form送信をさせないことでバリデーションなどの中間処理を挿入できる
if (this.blankNotes) {
}
if (this.$refs.customerForm.validate()){
  this.show('customer-form')
}

Jest
テストフレームワーク