web-dev-qa-db-ja.com

配列でのVue.jsフィルタリング

Vue.jsの計算されたプロパティを使用して配列をフィルタリングしようとしています。複数のフィールド、名前、状態、タグなどを検索したいのですが。

私のデータ：

events: [
  {
    id: 1,
    name: 'Name of event',
    url: '#',
    datetime: '2017-05-10T00:00:00Z',
    description: 'The full text of the event',
    state: 'VIC',
    tags: [
      'ordinary',
      'advanced'
    ]
  },
  {
    id: 2,
    name: 'Another event',
    url: '#',
    datetime: '2017-05-12T00:00:00Z',
    description: 'The full text of the event',
    state: 'VIC',
    tags: [
      'beginner'
    ]
  },
  {
    id: 3,
    name: 'Great event',
    url: '#',
    datetime: '2017-05-18T00:00:00Z',
    description: 'The full text of the event',
    state: 'NSW',
    tags: [
      'beginner'
    ]
  }
]

}、

次の関数は期待どおりに機能しますが、「タグ」（コメントアウト）内のアイテムを検索する方法がわかりません。

searchevents: function(){
  let result = this.events
  if (this.filterValue){
    result = result.filter(event =>
      event.name.toLowerCase().includes(this.filterValue.toLowerCase()) ||
      event.state.toLowerCase().includes(this.filterValue.toLowerCase())
      // event.tags.toLowerCase().values().includes(this.filterValue.toLowerCase())
    )
  }
  return result
}

以下は空白の配列を返します。このメソッドは、angularで実行したが、vueでは実行しなかった場合は問題なく機能します。

searchevents2: function(){
  var searchRegex = new RegExp(this.filterValue,'i')
  this.events.filter(function(event){
    return !self.filterValue || searchRegex.test(event.name) || searchRegex.test(event.state)
  })
}

理想的には、フィルタリングする配列アイテムを一覧表示できるようにするか、配列全体でフィルタリングできるようにします。

助けに感謝します、最初にここに投稿してください。私はJavascriptよりもPython）の経験が豊富なので、間違った用語を使用することもあります。

arraysvue.jsfiltering
5
Kyle Hadland

あなたはそれほど遠くはありませんでした。

searchEventsフィルターの場合、タグフィルターを追加する必要があります。これがあなたがそれをするかもしれない方法です。

searchevents: function(){
    let result = this.events
    if (!this.filterValue)
      return result

    const filterValue = this.filterValue.toLowerCase()

    const filter = event => 
        event.name.toLowerCase().includes(filterValue) ||
        event.state.toLowerCase().includes(filterValue) ||
        event.tags.some(tag => tag.toLowerCase().includes(filterValue))

    return result.filter(filter)
}

Array.some（） は、配列のいずれかの要素がテストに合格した場合にtrueを返す標準の配列メソッドです。

searchevents2: function(){
    const searchRegex = new RegExp(this.filterValue,'i')
    return this.events.filter(event => 
      !this.filterValue || searchRegex.test(event.name) || searchRegex.test(event.state))
}

searchEvents2あなたは本当にそこに誤ったselfを残しただけです。フィルタを実行する前にselfを設定する必要があったか、ここで行ったように、それを矢印関数に変換しました。

例 。

3
Bert
const app = new Vue ({
  el: '#app',
  data: {
    search: '',
    userList: [
      {
        id: 1,
        name: "Prem"
      },
      {
        id: 1,
        name: "Chandu"
      },
      {
        id: 1,
        name: "Shravya"
      }
    ]
  },
  computed: {
    filteredAndSorted(){
     // function to compare names
     function compare(a, b) {
       if (a.name < b.name) return -1;
       if (a.name > b.name) return 1;
       return 0;
     }
      
     return this.userList.filter(user => {
        return user.name.toLowerCase().includes(this.search.toLowerCase())
     }).sort(compare)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <div class="search-wrapper">
    <input type="text" v-model="search" placeholder="Search title.."/>
        <label>Search Users:</label>
  </div>
  <ul>
    <li v-for="user in filteredAndSorted">{{user.name}}</li>
  </ul>
</div>
2
Prem Kumar