Vue中使用 v-for和v-if被语法检测到错误信息时（You should not mix ‘v-for‘ with ‘v-if‘）

Vue中使用v-for和v-if同时使用被语法检测到错误信息时（You should not mix ‘v-for’ with ‘v-if’）

v-for和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’
原因：v-for的优先级会高于v-if，因此v-if会重复运行在每个v-for中。

解决方案：在外层套多一层标签，把v-for放到这个标签上

其他的结构不变

//如
<template v-for="">
	其他结构
</template>

以下是错误的和解决的

错误语法报错的

<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提出去就好了）