😊

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

2023/02/04に公開

必要なコード

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: 'タイトル1',
     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 タイトル1テキスト1</li>

必要なdata

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

 dataList = [
    { 
     nmuber: 1,
     title: 'タイトル1',
     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
    },

Discussion

ログインするとコメントできます