Vue.jsの初歩的なミス

たぶん、Vue.jsを使い慣れている人は起こさないであろう、本当に初歩的なミス。

慣れないうちはエラーの内容から何がいけないのか推測しにくいと思ったので自分の備忘記録のためにも・・・
というかそれがメイン。調べてもなかなか見つけられなくて時間かかりすぎる・・・（自分の知識がなさすぎるから）

Vue.jsに限ったことではないけど、間を開けずに勉強実践習得すべき・・・


随時追記していく予定です。間違っていたらコメントください。

## scriptの位置

いつも（jQuery）の癖で、headタグ内に書いていて動かなかった。
CDNの読み込みはheadタグ内でも問題ない。
`id="app"`とした場合、その`el: '#app'`に関するの記述は、`id="app"`より後ろでないといけない。
インラインの場合も外部ファイルの場合も同様。

もしかしてこれかもって気づくまで2hくらい つらい
参考：https://qiita.com/icbmuma/items/49078cbe7cfe7dd2cd5f
これにたどり着けて確信。

## `el: '#app'`が複数存在している

これは、ちゃんと自分で考えてすすめていたら起きなそうだけど。
私の場合は、いろんなものを参考にしながらすすめていたため、消し忘れていて気づかずにずっと使っているコードだけを確認していた。
一部動いて一部動かないみたいな状態だったので、余計に気づかなかった。
それに気がついたの多分3h後とか。。。ないた

## `data`に定義し忘れている

それに関わる部分が、ごっそり表示されない。
でも、Consoleにエラーが出るからまだわかる

## `{{ messege }}`の`{`が一つでもかけている

純粋なタイプミスだが、`el`で指定していた部分すべてがなにも表示されないのでどこをミスったのか探すのに時間がかかった。
Consoleにも何も出ない。
コードも何も出ていない。

## `this.`のつけ忘れ

これは、この先もやりそう・・・
すぐ気づくようにはなってきたけど・・・
特に、`methods:`の中で他のメソッドを呼びたい時とか忘れる。

## setTimeoutの書き方

`setTimeout(this.close(), 3000);`
ではなくて
`setTimeout(this.close, 3000);`

## コンポーネントに`v-on:click`を付けたい場合

子コンポーネントで親のメソッドを呼びたい時

例えばこんなやつ
`<next-button v-on:click="search_start">次へ</next-button>`

`.native`が必要
`<next-button v-on:click.native="search_start">次へ</next-button>`

## コンポーネントで持たせたい属性のデータの中に別のデータも持ちたい時

`<com-child val="あなたは{{ select_value }}を選択した">`
こんな感じなことをしたいとき（↑は{{ select_value }}がそのまま文字列として表示される）

`<com-child :val="'あなたは' + select_value + 'を選択した'">`
これでいける

ひとつの記事にまとめました
[Vue.jsで属性かv-bindかの応用](https://qiita.com/mimoe/items/8be70a8b39cee9fd049d)

## template要素はコンポーネント内では使えない

`v-if`で要素を出し分けたい時には、`<template v-if="valueA">`のように出し分けたい要素が複数あった場合でも、HTML構造を変えることなく使えるが、
コンポーネントのテンプレートを定義するところでは使えない。

`template: '<template><p>コンテンツ1</p><p>コンテンツ2</p></template>'`
これは間違いで表示されない

## コンポーネントで`props`を使う場合はケバブとキャメルに注意！

コンポーネントを定義する側ではキャメル`titleText`
HTML側ではタグ名・属性名はケバブ`title-text`

※追記
HTMLでのカスタムタグはパスカルでも問題ないらしい

## classやid,valueなどにbindするときは`:`をつける

よく忘れて、ん？ってなる・・・

`<input type="radio" :id="who.val" :value="who.val" v-model="form.who">`
例えばこんなやつ

## `v-model`はコンポーネントできない

`v-model`をコンポーネント内にセットし、`props`で値を渡すことはできない。

`<vue-input name="input" v-model="form.input"></vue-input>`
のように、`v-model`を付けたい要素がルートなコンポーネントはできる

`<div class="textArea"><textarea v-model="form.textarea"></textarea></div>`
のように、ルートでない場合はできない

## window または document が undefined のとき
とあるモジュールを入れたら、
`document is not defined` とか `window is not defined` とかでた。
`<no-ssr>` で囲う
参考：https://crieit.net/posts/Nuxt-document-is-not-defined

## `$store.getters`は`computed`で呼ぶ
呼ぶっていう表現があっているかわからないけど、、
storeで定義している値を参照するときは`data`ではなくて`computed`に書く

`data`に書くと、たまにデータがまだ取得できていない時に処理が走っているよう

※追記
基本的には`computed`で問題なさそうだけど、抜け落ちる時もあるっぽい・・・

## beforeRouteLeaveはサブコンポーネントでは使えない
編集中の内容が保存されていなかったりした時に、アラートを出せるが、これはルートコンポーネントしか使えないらしい
使う方法
https://ja.coder.work/so/vuejs2/724205

## $emitで引数を渡す場合、()注意
`<child @child-event="handler" />`
`<child @child-event="handler($event)" />`
↓はダメ
`<child @child-event="handler(event)" />`

## `onload`と`onerror`は`@load`と`@error`で使える
ミスじゃないけど、これだけの記事立ち上げるほどでもないのでここに・・
`<img @load="imageLoad" @error="errorCheck" :src="imageFile">`

## `v-for`の`key`に`index`を入れればいいわけではない・・
何も考えず、`:key="index"`とよく設定していたが、ページ遷移するタイプのときに、
同じものとして扱われていて、不都合が生まれた時があった。
`:key="item.id"`とかにしたほうが良さそう

## `form`タグに`@submit.prevent`を書く
`form`を使って実装していない場合でも、`Password field is not contained in a form`とコンソールにWarningが出ていてこれを解消しようとすると、`form`タグで囲うなどが必要だが、囲うだけだとエラーも何も出ず、フォームが実装されない。
`<form @submit.prevent>`とする必要があるらしい

## `$refs`で取得するDOMの順番は保証されない
`v-for`に`ref`をつけて、スクロールポジションによって処理をしたかったが、どうにもずれる。
ずれないときもある。。。
どこかの計算が間違っているのかと結構何日も検証してた・・・
index順にDOMを取得できていないとは・・・
indexでsortしたり、indexをキーにfindすることによって解決しました。
https://qiita.com/bagooon/items/058db1431fc7d02b6aeb