技術とかの雑なToday I Learnedメモ

Vueとかelement-uiとか

Vue のこととか element-ui のこととか

Vue の SFC で template から ComputedRef などの Ref にアクセスするとき

.valueいらない

miyaoka さんありがとうございます。

emit の指定方法をミスって時間を溶かす

// Parent.vue

<Child @hoge-fuga="hogeFuga" />
// Child.vue

emit('hogeFuga') // ほんとはhoge-fugaじゃないといけない

というしょうもないミスで時間を溶かした。

ミスの原因としては補完が効かなかったのもあるし、コンポーネントのファイルを常に同時に見れるような状態じゃない(本来は上の例のようなほぼ何もないコンポーネントではなくもっとたくさんの記述がある)というのもあるので、正直emitに関しては慣れるしかないと思っている。

Nuxt(というか Vue)の苦手なところに、(UpperCamelCase と)lowerCamelCase と kebab-case を混ぜて使うのがほぼ必須になってしまうというのがある。

僕の価値観なのか分からないけど、JavaScript は基本的に Upper もしくは lower の CamelCase ですべてを構成したい。ディレクトリ名からファイル名から変数関数その他色々をすべて。

例外として API のレスポンスで返ってくる JSON の key だったりはあるけど。

なので props を「渡す側を kebab-case」「受け取る側を lowerCamelCase」で定義する必要があるというのがとても苦手……。

element-ui の Dialog を重ねる

elementUI でダイアログのマスクがダイアログより上に来る - Qiita

element-ui の Dialog を開いた状態で別のコンポーネントの Dialog を開くと、mask(モーダル外の黒背景の部分)の下に Dialog が潜ってしまい、一度クリックしないと出てこないという現象が発生する。

で、この記事の通りにmodal-append-to-body="false"を設定すると直る。

直るのだが、element-ui の Dialog のスタイルを上書きしているのでスタイルがコンフり、見た目がバグってしまった。

なのでバグったほうに独自の class をつけてスタイルをちまちま修正しています……。