问题重现

// 伪代码

<div v-for="item in List" v-if="item.type === 'nomal'">
	// something code
</div>

原因

因为v-for的优先级比v-if优先级高，两者不能出现在同一节点上。

解决办法

利用computed对数据进行过滤，只返回符合条件的数据进行渲染

computed: {
  /*
    用于解决v-for和v-if不能同时使用的问题，只会返回符合的数据进行渲染
    v-if="type === 'normal'"
  */

  filterList() {
    return this.List.filter((item) => {
      return item.type === 'normal'
    })
  }
},

然后我们循环的时候直接循环过滤后的数据（filterList）就可以了