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);
    }
}

Answer 2

<div v-for="(item,index) in list" :key="index">{{（filter==0?true:filter==item.type?item.type==0?true:false:false）? item.name : '没有数据'}}</div>

判断的逻辑写的有些啰嗦，建议您可以再优化一下，另外建议使用===，不要用==

Answer 3

逻辑问题

   <ul v-if="list.length > 0">
      <li v-for="(item,index) in list" :key="index">
        <!-- do something -->
      </li>
    </ul>
    <div v-else>没有数据</div>

Answer 4

v-if 和 v-for 最好不要同时使用，可以使用v-show，如果同时使用，v-if的优先级比v-if高，详见：https://cn.vuejs.org/v2/guide...