Vueを学習している

VueでシャニマスのWING編のオーディションパートでライバルアイドルが出してくる火力を計算する簡単なWebアプリを作っている。

表の画像は雑なモックアップで、手を動かしてから5時間ぐらいでオーディションのデータを書いたjsonを拾ってきて、それを適当に表示してやる所までできた。jsonまわりがなかなかうまくいかなくて変に遠回りしたので、たいていの人はもっと早くできそう。

初日にはまった所

<!-- だめ -->
<img :alt="idol.name" :src="'./assets/img/idol/' + idol.name + '.png'">

<!-- よい -->
<img :alt="idol.name" :src="require('./assets/img/idol/' + idol.name + '.png')">

初日でわからなかった所