鍍金池/ 問答/HTML/ VUE中 v-for同時使用v-if 后再用v-else

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

在項目中輪循數(shù)組v-for，然后根據(jù)關(guān)鍵詞匹配顯示篩選內(nèi)容，用的v-if的二元表達(dá)式，在使用v-else后出現(xiàn)的bug，出現(xiàn)了多個v-else的內(nèi)容，代碼如下：

<input v-model='filter' type='text' > //0:全部 1:類型1 2:類型2
//如果有類型 需要判斷item中的另一個關(guān)鍵字段 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>沒有數(shù)據(jù)</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>

望高手解答下，是否有解決方案，或者優(yōu)化的地方，感謝

回答
編輯回答
笨尐豬

v-if 和 v-for 最好不要同時使用，可以使用v-show，如果同時使用，v-if的優(yōu)先級比v-if高，詳見：https://cn.vuejs.org/v2/guide...

2017年11月27日 11:19
編輯回答
陌南塵

建議使用computed計算出篩選后的數(shù)據(jù),然后再判斷循環(huán)
computed類似這樣

computed:{
    filtered_list(){
        return this.list && this.list.filter(item=>this.filter===0 || item.type===this.filter);
    }
}
2018年5月11日 15:00
編輯回答
愛礙唉

邏輯問題

   <ul v-if="list.length > 0">
      <li v-for="(item,index) in list" :key="index">
        <!-- do something -->
      </li>
    </ul>
    <div v-else>沒有數(shù)據(jù)</div>
2017年2月10日 08:29
編輯回答
葬憶
<div v-for="(item,index) in list" :key="index">{{（filter==0?true:filter==item.type?item.type==0?true:false:false）? item.name : '沒有數(shù)據(jù)'}}</div>

判斷的邏輯寫的有些啰嗦，建議您可以再優(yōu)化一下，另外建議使用===，不要用==

2018年8月26日 15:20