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

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

Vue.jsのツボとコツがゼッタイにわかる本

• 作者: 中田亨
• 出版社/メーカー: 秀和システム
• 発売日: 2019/03/21
• メディア: 単行本
• この商品を含むブログを見る

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

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

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

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

Vue.js を組み込む準備

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

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

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

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

データの持たせ方、として上記のような持たせ方（一部省略）が書いてあるのですが、これが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をバインドさせる際の注意点