Lon Sagisawa

IMG 1537

Vueのハンズオン

2019年04月24日

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

2019-04-26-03-13-29

表の画像は雑なモックアップで、手を動かしてから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')">

初日でわからなかった所

  • コンポーネントのプロパティとしてオブジェクトを渡す方法がよくわからなかった。

    • そんなに難しくはないはずなので、これができたら表の描画部分は別のコンポーネントに分けたい。
logo

Lon Sagisawa

福井県在住の1995年生まれ男性。ゲームしたり写真を撮ったりコードを書いたりして過ごしています。日本国内でお仕事募集中。

Mastodon / GitHub / Twitter / Twitch