v-forで必要なオブジェクトだけ取得する時

必要なコード

v-forで一括してでデータを出力したいけど、デザインの都合一部が異なる情報が途中で入ってくる時があり、
単純に配列の並び順の通り素直に表示させれない時がある。
でも、データの塊としては一つにしたい時。

必要なデータを抽出してliに表示する方法。

必要なコード

dataList.vue

<templet>
<div>
 <ul>
  // 各li毎に出力するデータを変える
  <li v-for="item in firstList" :key="item.nmuber">
  {{item.nmuber}} {{item.title}}{{item.text}}
  </li>
  <li v-for="item in secondList" :key="item.nmuber">
  {{item.nmuber}} {{item.title}}{{item.text}}
  </li>  
  <li v-for="item in thirdList" :key="item.nmuber">
  {{item.nmuber}} {{item.title}}{{item.text}}
  </li>   
</div>
</templet>
<script lang="ts">
data() { 
  return {
  // 関連情報を一塊にしたオブジェクト
  // 情報の区別をつけるために、「Tags:」を入れている
　  dataList = [
  　 { 
　    nmuber: 1,
　    title: 'タイトル１',
　    text: 'テキスト1',
  　  tags: ['firstTag'],
　   },
　   { 
　    nmuber: 2,
  　  title: 'タイトル2',
　    text: 'テキスト2',
  　  tags: ['secondTag'],
　    },
  　 { 
　    nmuber: 3,
  　  title: 'タイトル3',
　    text: 'テキスト3',
  　  tags: ['thirdTag'],
　   },  
　  ] 
 }
},

　　　//  「tags:」の値をもとに、必要なデータだけを抽出する
  computed: {
    firstList() {
      const list = this.dataList.filter((item) =>
        item.tags.includes('firstTag')
      )
      return list
    },

    secondList() {
      const list = this.dataList.filter((item) =>
        item.tags.includes('secondTag')
      )
      return list
    },

    thirdList() {
      const list = this.dataList.filter((item) =>
        item.tags.includes('thirdTag')
      )
      return list
    },
  },
</script>

html

v-forで、computedで作成した関数の戻り値をitemに入れる。

  <li v-for="item in firstList" :key="item.nmuber">
  {{item.nmuber}} {{item.title}}{{item.text}}
  </li>

以下の形になる。

<li>1　タイトル１テキスト１</li>

必要なdata

「nmuber、title、text」　は共通情報。
表示するリストを分けるために、「tags:」プロパティを追加。

 dataList = [
  　 { 
　    nmuber: 1,
　    title: 'タイトル１',
　    text: 'テキスト1',
  　  tags: ['firstTag'],
　   },
    ...
    ...
　  ] 

computedで必要な情報に加工する

filter()で、取得したdataListをincludes（）で「tags」の値に一致したものをretuenして返す。

  computed: {
    firstList() {
    　　// dataListで
      const list = this.dataList.filter((item) =>
        item.tags.includes('firstTag')
      )
      return list
    },