【学習メモ】Vue.js のツボとコツがゼッタイにわかる本 その2

Vue.js のツボとコツがゼッタイにわかる本 の学習メモ続きです。

第3章 Vue.js で商品一覧を描画してみよう！

この章ではデモのECサイトを構築する、という内容で商品一覧ページの商品画像・価格の一覧、セール対象・送料無料のチェック、並び替えの実装をまずピュアな HTML/CSS で構築後に JavaScript で実装する流れで説明されます。

Vue.js での組み込みは 3-3 あたりの後半からなので、最初のほうは助走といった感じと思います。

3-3 商品データをアプリケーションに結び付ける

Vue.js を組み込む準備

data オプションにデータを定義する

コンポーネントの data オプションに、どのようなデータをどのような形式で持たせる必要があるかを考えます。

データの持たせ方を決める

ここで、データ型（数値、文字列、真偽値、配列、オブジェクト）や、変数名をどうするのが適切かを考えます。
表示中の商品数、チェックボックスやセレクトボクスの入力値は、互いに独立したデータなので、単独の変数にするとよいでしょう。一方、商品名や価格、商品画像のパスなど、1つ1つの商品に関するデータは、オブジェクト形式にまとめたものを配列に詰め込むと、管理しやすいでしょう。

No.	変数名	データ型	値	説明
1	count	数値		表示中の商品数
2	showSaleItem	真偽値	true	セール対象の商品のみ表示する
2	showSaleItem	真偽値	false	セール対象外の商品も表示する
5	products	配列		商品リスト（No.6〜No.10を持つオブジェクトの配列）
6	name	文字列		商品名

データの持たせ方、として上記のような持たせ方（一部省略）が書いてあるのですが、これがWordPressのカスタムフィールドのフィールド名とバリューの持たせ方に結構似てるのかなと思いました。
ACF側で画像だったらID出すか、真偽値かテキスト出すかとか予めぼんやりとでも想像しながらやっていたことを思い出したので、発想がなんとなく変えれるきっかけになるかもと感じます。

5章の自動見積フォームについても同じようにデータの持たせ方の表組みがあるのですが、こういう設計コード書く前に決めておけばAPI開発もスムーズにいくのかなあという印象です。

---

本の内容とは関係ないですが1個詰まったメモ

<img v-bind:src=""> がうまくいかないとき

Vue CLI（webpack）を使っている場合だとBase64に変換されるので、require() が必要

data () {
  return {
    ...
    products: [
      {
        ...
        image: '../assets/logo.png',
        ...
      },
        ...

ではなく、

           ...
        image: require("../assets/logo.png"),
      ...

とする。

参考： Vue.jsでimgタグのsrcをバインドさせる際の注意点