この章ではデモのECサイトを構築する、という内容で商品一覧ページの商品画像・価格の一覧、セール対象・送料無料のチェック、並び替えの実装をまずピュアな HTML/CSS で構築後に JavaScript で実装する流れで説明されます。
Vue.js での組み込みは 3-3 あたりの後半からなので、最初のほうは助走といった感じと思います。
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をバインドさせる際の注意点