vue.js实战实现购物车的单选全选和二维数组分类--第五章购物车练习(二)

本例介绍《vue.js实战》第五章最后的购物车练习二,

练习2:将商品列表list改为一个二维数组来实现商品的分类,比如分为"电子产品","生活用品","果蔬",同类商品聚合在一起.提示,你可能用到两次v-for.

提醒:二维数组可以采用这种方式

[
 {
     name:'电子产品',
     productList:[
    {
      id:1,
      name:'手机'
   },
    {
      id:2,
     name:'电脑'
    }

   ]
 }

]

html:

  <div id="app" cloak>
        <template v-if="list.length">
            <table>
                <tbody v-for="(tableItem, tableIndex) in list" v-if="tableItem.productList.length">
                    <tr>
                        <th><input type="checkbox" @click="handleTableItem(tableItem)"
                                :checked="isCheckedTableItem(tableItem)">{
  { tableItem.name }}</th>
                        <th>序号</th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item, index) in tableItem.productList">
                        <td><input type="checkbox" @click="handleChecked(item)" :checked="isChecked(item)"></td>
                        <td>{
  { index + 1 }}</td>
                        <td>{
  { item.name }}<