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

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

初日にはまった所

• axiosでjsonを取ってきたは良いが、データが見えない気がする。
  • 取ってきたjsonの中身はdata要素の中に入っている。
• 画像のファイル名をv-bindで変数からとってくると画像が出てこなくなる。
  • vue-cliで作ったプロジェクトの場合はrequireしてやる必要がある。

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

初日でわからなかった所

• コンポーネントのプロパティとしてオブジェクトを渡す方法がよくわからなかった。
  • そんなに難しくはないはずなので、これができたら表の描画部分は別のコンポーネントに分けたい。