VUE中 v-for同时使用v-if 后再用v-else

Question

在项目中轮循数组v-for，然后根据关键词匹配显示筛选内容，用的v-if的二元表达式，在使用v-else后出现的bug，出现了多个v-else的内容，代码如下：

<input v-model='filter' type='text' > //0:全部 1:类型1 2:类型2//如果有类型 需要判断item中的另一个关键字段 type 0:显示 1:不显示<div v-for="(item,index) in list" :key="index" v-if="filter==0?true:filter==item.type?item.type==0?true:false:false">{{item.name}}</div>
<div v-else>没有数据</div>

<script>
export default {
  data() {    return {
        filter:0,
        list:[
            {name:1,type=1},
            {name:2,type=1},
            {name:3,type=2},
            {name:4,type=2},
            {name:5,type=3}
            ]
        }
     }
  }
</script>

望高手解答下，是否有解决方案，或者优化的地方，感谢

Answer 1

建议使用computed计算出筛选后的数据,然后再判断循环computed类似这样computed:{     filtered_list(){        return this.list && this.list.filter(item=>this.filter===0 || item.type===this.filter);     } }