Use v-else after v-for in VUE uses v-if at the same time

in the project, the array vMurfor is rotated, and then the filter content is displayed according to keyword matching. Using the binary expression of v-if, multiple v-else content appears in the bug, that appears after using v-else. The code is as follows:

<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>

look forward to the master"s answer, whether there is a solution, or the place of optimization, thank you

Mar.31,2021

it is recommended that you use computed to calculate the filtered data, and then judge the loop
computed like this

.
computed:{
    filtered_list(){
        return this.list && this.list.filter(item=>this.filter===0 || item.type===this.filter);
    }
}

<div v-for="(item,index) in list" :key="index">{{filter==0?true:filter==item.type?item.type==0?true:false:false? item.name : ''}}</div>
The logic of

judgment is a bit verbose. It is suggested that you can optimize it again. In addition, it is recommended to use =, not =

.

Logic problems

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

it is best not to use v-if and v-for at the same time. You can use VMI show. If you use it at the same time, v-if has a higher priority than v-if. For more information, please see ide/list.html-sharpv-for-with-v-if" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.

.
Menu