Vueとかelement-uiとか

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

.valueいらない

templateの中はvalue無しでいけますよ
— miyaoka (@miyaoka) August 11, 2021

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

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

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

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

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