vue,v-for和v-if被语法检测到错误信息时（You should not mix 'v-for' with 'v-if'）

错误信息：The ‘undefined’ variable inside ‘v-for’ directive should be replaced with a computed property that returns filtered array instead. You should not mix ‘v-for’ with ‘v-if’
用了语法检测就要认这个邪，
直接看代码，报错的：

        <div
          class="productListBox"
          v-for="(item,index) in info.productList
          :key="index"
          v-if="index < proInitLength"
        >
          <div><span>{{item.name}}</span><span>(1次/人)</span></div>
          <div>¥{{item.price}}</div>
        </div>
     

解决的：

<template v-for="(item,index) in info.productList">
        <div
          class="productListBox"
          :key="index"
          v-if="index < proInitLength"
        >
          <div><span>{{item.name}}</span><span>(1次/人)</span></div>
          <div>¥{{item.price}}</div>
        </div>
      </template>

主要就是把，v-for="(item,index) in info.productList"踢出去，用template包裹代码块（只要把v-for提出去就好了）