完全に自分への備忘録。もしかたら、勘違いして書いていたりするかもしれないので教えていただけると喜びます。
目次
Laravel編
中間テーブルの作り方
これ毎回色々調べながらやってるんで、少し自分でまとめてみる。
まず命名規則。紐付けるモデル名を単数で_を使い紐づける。
php artisan make:model item_tag OK
php artisan make:model tag_item NG気おつけるのはアルファベット順で書く事。モデルファイルも特に要らない。itemとtagのマイグレーションファイルでそれぞれ外部キーを設定しておけばアソシエーションも楽になる。
下のようにbelongsToManyの引数を設定したりしなくてもよくなる。(命名規則がしっかりしていれば。)リレーションについて
Itemモデル
public function tags()
{
return $this->belongsToMany('App\Tag');
}
Tagモデル
public function items()
{
return $this->belongsToMany('App\Item');
}ルートの設定。404エラーになる時。
作業してたらいきなりviewが無いって404出された時。viewファイルもあるし、route:listでも表示出来るになぜ。
原因はrouteの書いてる順番にありました。上から優先的に読み込まれていくのでここを疑ってみるのはあり。
Vue.js編
clickとchangeの違い。
click
発火するタイミングが違います。clickは名前の通りそのままクリックで発火。ctrlとかalt,shiftみたいに連携したクリックも表せる事が出来る。
また、preventというe.preventDefault()と同じ働きをするものも選択出来る。
change
挙動は似ていますが、若干違います。こっちの方が遅い感覚です。changeはinputやfileとかが選択された時に実行されます。
inputは入力が終わり、キーボードから手が離れたら実行されます。入力中の発火ならinputとか。
配列の中から特定の値に一致するものが含まれているか確認したい時
someじゃなくてもindexOfでもいける。
some()をif文の条件式で使ったりするとちょっとややこしくなったりする時がある。(自分だけ)そんな自分みたいな人はindexOfでもいいかと思う。
配列の中に特定の値が含まれてたらそのindex番号を取ってくれるし、一致しなかったら-1を返すからこっちでも良い。
v-forの使い方。
v-forは新しく親要素を作って囲まなくて良い。railsとかlaravelのbladeでforeachを書く時は囲むように書くけど、vueはv-forをかけた要素自体が繰り返されるので、bladeの時と違う。
どんな表示するかによってその都度変更していけば良いと思う。
<div v-for="(image, index) in images" :key="index" class="mx-1">
<img v-if="image.image_path" :src="image.image_path" style="width: 100px; height: 101px;">
</div>splice()は引数に何を持ってくる？
結構便利屋のsplice()さん。配列の中に追加したり、削除、置き換えたり出来る。配列の内容を変更出来る。
第一引数にはindex番号を指定する、これ大事。第二、第三引数はどんな処理かによって変化する。
おまけ
正規表現否定後読み
ここに載っているのがわかりやすいです。
vueでsplit()で正規表現で使う機会があって出会った。
最初はむずそうって感じたけど、確かにこれ書けたら色々便利な事あるかもとか思ったりしました。
これに出会ったおかげでめちゃくちゃリファクタリング出来たw
hoge.split(/(?<!data:image\/(jpeg|png);base64),/);
カンマで区切って取得しているが、base64,のカンマの場合は無視するようにしている。今回はそんな感じです。今は個人アプリを作っていて、その中で出会ったメソッドたちも居てます。
また色々記事上げて行けるよう個人アプリ取り組みます。
今回はそんな感じで
以上！
