在vue中 按數字迴圈次數

html

  <div class="box">
      <ul class="title">
        <li class="title-item" @click="toName(index)" v-for="(title, index) of listName" :class="{'title-active': index === currentIndex}" :key="index">{{title}}</li>
      </ul>
      <div class="list"  ref="listBox">
        <ul>
          <li v-for="item of list" :key="item.id" class="itemBox">
            <p class="list-name">{{item.class}}</p>
            <ul class="item-list">
              <li class="item" v-for="(data, index) of item.content" :key="index" @click="showPop(index, item.content)">
                <div class="item-img">
                  <img :src="data.imgUrl" />
                </div>
                <div class="item-info">
                  <p class="item-name">{{data.name}}</p>
                  <div class="item-pepper">
                    <svg class="icon" aria-hidden="true" v-for="(pepperOn, index) of 5" :key="index">
                      <use v-if="index <= (data.pepper - 1)" xlink:href="#ht-icon-lajiao"></use>
                      <use v-else xlink:href="#ht-icon-lajiao-copy"></use>
                    </svg>
                  </div>
                  <div class="item-price">
                    <span class="item-del">￥{{data.priceDel}}</span>
                    <span class="item-price-now">￥<span class="item-price-font">{{data.priceNow}}</span></span>
                  </div>
                </div>
              </li>
              <li class="supportItem" v-if="item.content.length < 1" v-for="(suppor, index) of item.count" :key="item.class + index"></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
 

 data資料結構

list: [
        {
          id: '001',
          class: '招牌菜',
          count: 3,
          content: []
        }, {
          id: '002',
          class: '火鍋',
          count: 2,
          content: [
            {
              imgUrl: 'http://zxx.tianyour.com:80/image/20180515/104_1526353680561018948.jpg',
              name: '養顏金牛掌',
              pepper: 2,
              priceDel: '128.0',
              priceNow: '118.0'
            }, {
              imgUrl: 'http://zxx.tianyour.com:80/image/20180515/104_1526354055933054500.jpg',
              name: '舞動的粉絲',
              pepper: 3,
              priceDel: '48.0',
              priceNow: '42.0'
            }
          ]
        }, {
          id: '003',
          class: '小炒',
          count: 3,
          content: []
        }, {
          id: '004',
          class: '熱菜',
          count: 7,
          content: [
            {
              imgUrl: 'http://zxx.tianyour.com:80/image/20180726/104_1532592203070026641.jpg',
              name: '肥牛火鍋',
              pepper: 3,
              priceDel: '288.0',
              priceNow: '273.6'
            }, {
              imgUrl: 'http://zxx.tianyour.com:80/image/20180726/104_1532592094811055591.jpg',
              name: '湯鍋毛肚',
              pepper: 3,
              priceDel: '128.0',
              priceNow: '121.1'
            }, {
              imgUrl: 'http://zxx.tianyour.com:80/image/20180726/104_1532591948721020109.jpg',
              name: '汽鍋魚頭',
              pepper: 3,
              priceDel: '168.0',
              priceNow: '159.6'
            }, {
              imgUrl: 'http://zxx.tianyour.com:80/image/20180628/104_1530172915267059080.jpg',
              name: '幹椒大蒜炒臘牛肉',
              pepper: 3,
              priceDel: '58.0',
              priceNow: '48.0'
            }, {
              imgUrl: 'http://zxx.tianyour.com:80/image/20180628/104_1530172876440041307.jpg',
              name: '漢菜皮蛋湯',
              pepper: 0,
              priceDel: '22.0',
              priceNow: '18.0'
            }, {
              imgUrl: 'http://zxx.tianyour.com:80/image/20180628/104_1530172813337055894.jpg',
              name: '小炒黑豬肉',
              pepper: 2,
              priceDel: '38.0',
              priceNow: '31.0'
            }, {
              imgUrl: 'http://zxx.tianyour.com:80/image/20180628/104_1530172769477074813.jpg',
              name: '鳳爪豬腳鉢',
              pepper: 2,
              priceDel: '78.0',
              priceNow: '63.0'
            }
          ]
        }
      ]
 

count 有幾個專案 在content 還沒有被填充的時候  先建立幾個空的li 佔位

當請求返回資料填充了content之後 佔位的 li 隱藏掉

建立佔位 li 的時候，根據數字迴圈

這時候 :key 使用index會有重複報錯

因為每個分類裡面都是使用index 

這時候 :key 可以用分類名 + index 來做為:key