Vuex 絞り込み機能を実装したい

Question

入れ子になっているハッシュを参照して、絞り込み機能を実装したいと思っています。

dataの中身

[{
  "id":1,
  "tweet":"ツイート内容",
  "hashtags":[
    {"hash":"ハッシュタグ1"},
    {"hash":"ハッシュタグ2"}
  ]
},
{
  "id":2,
  "tweet":"ツイート内容",
  "hashtags":[
    {"hash":"ハッシュタグ1"},
    {"hash":"ハッシュタグ2"}
  ]
}]

hashの値を判定して、ツイートの絞り込みを行う場合、どのような書き方が良いでしょうか？
computed内でfilterを利用するのはわかるのですが、入れ子になった場合がわかりません。

ご教授いただければ幸いです。

<div v-for="(tweet, index) in tweets" :key="index">
  <p>{{ tweet.tweet }}</p>

  <div class="hashtag" v-for="(hashtag, index) in tweet.hashtags" :key="index">
    {{ hashtag.hash }}
  </div>
</div>

Answer 1

{
  data: {
    tweets: [{
      "id":1,
      "tweet":"ツイート内容",
      "hashtags":[
        {"hash":"ハッシュタグ1"},
        {"hash":"ハッシュタグ2"}
      ]
    },
    {
      "id":2,
      "tweet":"ツイート内容",
      "hashtags":[
        {"hash":"ハッシュタグ2"}
      ]
    }],
    target: 'ハッシュタグ1'
  },
  computed: {
    hoge() {
      return this.tweets.filter(tweet => tweet.hashtags.some(tag => tag.hash === this.target))
    }
  }
}

<div v-for="(tweet, index) in hoge" :key="index">
  <p>{{ tweet.tweet }}</p>
   <div class="hashtag" v-for="(hashtag, index) in tweet.hashtags" :key="index">
    {{ hashtag.hash }}
  </div>
</div>

のようにsomeを使ってfilterすれば良いと思います。

Comments

[ruby_0ct]

そんなメソッドがあるんですね！
解決できました。ありがとうございました。