Vue.jsでコンポーネントに配列を渡したい

やりたいこと

Vue.jsで下記のようなコンポーネントを作りました。
呼び出し先で v-for 部分に配列（ productList ）を渡したいのですが、やり方がわからない状況です＞＜

// component

<template>
 <div>
  <h2>{{ title }}</h2>
  <ul>
   <li v-for="item in itemList">
    <p>{{ item.name }}</p>
    <p>{{ item.category }}</p>
   </li>
  </ul>
 </div>
</template>

<script>
export default {
  name: 'ItemCard',
  props: {
    title: String,
    itemList: Array
  }
}
</script>

// view

<template>
  <div>
    <ItemCard
     title="タイトル"
     itemList=""
    />
  </div>
</template>

<script>
import ItemCard from '@/components/ItemCard.vue'

export default {
  name: 'foo',
  components: {
    ItemCard
  },
  data() {
    return {
      productList: [
        { name: '商品A', category: 'categoryA' },
        { name: '商品B', category: 'categoryB' }
      ]
    }
  },
}
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLファイルで試しました

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5  <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
6  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7</head>
8<body>
9<div id="app">
10  <div>
11    <item-card
12     title="タイトル"
13     :item-list="productList"
14    />
15  </div>
16</div>
17<script>
18Vue.component('item-card', {
19  props: ['title', 'itemList'],
20  template: `
21 <div>
22  <h2>{{ title }}</h2>
23  <ul>
24   <li v-for="item in itemList">
25    <p>{{ item.name }}</p>
26    <p>{{ item.category }}</p>
27   </li>
28  </ul>
29 </div>
30</template>
31`,
32})
33
34var app = new Vue({
35  el: '#app',
36  data: function() {
37    return({
38      productList: [
39        { name: '商品A', category: 'categoryA' },
40        { name: '商品B', category: 'categoryB' }
41      ]
42    });
43  },
44});
45</script>
46</body>
47</html>