v-forとv-ifの併用について

下記の様なコードでAPIで取得した type の値によってリスト内のコンポーネントを書き換えたいです

vue
1<ul>
2 <li v-for="item in items" :key="item.id">
3  // item.typeによって表示するcomponentを書き換えたい
4 </li>
5</ul>

v-for 内で v-if を使って item.type に応じてcomponentを書き換えようと考えているのですが、
スタイルガイドによると同時使用は禁止とのことでどうしようかと悩んでいます。

現状↓

<ul>
 <li v-for="item in items" :key="item.id">
  <template v-if="item.type === '1'">
   <component-a>
  </template>
  <template v-else-if="item.type === '2'">
   <component-b>
  </template>
 </li>
</ul>

初心者質問で申し訳ないですがアドバイスお願いします＞＜

yambejp

2020/03/03 03:30

具体的なデータとどう表記したいか提示してください

行動規範の内容に同意します

回答2件

ベストアンサー

これは簡単に言うと v-for と一緒に v-if を使うと、なにか起きるたびにv-for指定したリストの全アイテムについてv-ifの表示判定処理が実行されるのでパフォーマンス上好ましくないということです。
アイテム数が少ない場合など、パフォーマンスが問題とならない状況なら同時に使っても構わないと思います。

投稿2020/03/03 04:08

ku__ra__ge

総合スコア4524

miyabeam

2020/03/03 04:21

なるほど・・スタイルガイドのBAD例のように ``` <li v-for="user in users" v-if="user.isActive" :key="user.id" > ``` 同DOM内で同時使用でなければ問題ない感じでしょうか（現状のコードを質問概要欄に追記しました！）今回の例は6件制限があるのでそこまで数は多くないです。

行動規範の内容に同意します

この場合computedを使用しましょう

...
<ul>
 <li v-for="item in itemTypes" :key="item.id">
    <template v-if="item.type === '1'">
   <component-a>
  </template>
  <template v-else-if="item.type === '2'">
   <component-b>
  </template>
 </li>
</ul>

...
<script>

...
computed:{
  itemTypes()=>{
    return this.items.filter(function(item){
      return item.type
    })
  }  
}
...

</script>

投稿2020/03/03 04:02

編集2020/03/03 05:24