ホーム>2020-05-14 14:25source

javascript - VueJS 2でVuetifyJSリストに検索および並べ替え機能を追加する

単純な検索と並べ替え機能を追加する必要がありますVuetifyJSリスト。リストのCodePenの例を次に示します。https://codepen.io/anon/pen/bxGGgv

VueJS 2でこれを行う標準的な方法は何ですか？

HTML：

<v-list two-line>
  <template v-for="(item, index) in items">
      <v-list-tile
        :key="item.title"
        avatar
        ripple
        @click="toggle(index)"
      >
        <v-list-tile-content>
           <v-list-tile-title>{{ item.title }}</v-list-tile-title>
           <v-list-tile-sub-title class="text--primary">
               {{ item.headline }}
           </v-list-tile-sub-title>
           <v-list-tile-sub-title>{{ item.subtitle }}</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
      <v-divider
        v-if="index + 1 < items.length"
        :key="index"
      ></v-divider>
  </template>
</v-list>

JS：

 export default {
    data () {
      return {
        selected: [2],
        items: [
          {
            action: '15 min',
            headline: 'Brunch this weekend?',
            title: 'Ali Connors',
            subtitle: "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
          },
          {
            action: '18hr',
            headline: 'Recipe to try',
            title: 'Britta Holt',
            subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
          }
        ]
      }
    },
  }

javascript

search

vue.js

vuejs2

vuetify.js

解決した方法 # 1

クラスで計算プロパティを定義し、フィルターを実行できます。この計算されたプロパティを次のように使用できます。フィルタリング そして仕分け 関数。

コペン

new Vue({
    el: '#app',
    data: {
        selected: [2],
        search: '',
        items: [{
                action: '15 min',
                headline: 'Brunch this weekend?',
                title: 'Ali Connors',
                subtitle: "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
            },
            {
                action: '2 hr',
                headline: 'Summer BBQ',
                title: 'me, Scrott, Jennifer',
                subtitle: "Wish I could come, but I'm out of town this weekend."
            },
            {
                action: '6 hr',
                headline: 'Oui oui',
                title: 'Sandra Adams',
                subtitle: 'Do you have Paris recommendations? Have you ever been?'
            },
            {
                action: '12 hr',
                headline: 'Birthday gift',
                title: 'Trevor Hansen',
                subtitle: 'Have any ideas about what we should get Heidi for her birthday?'
            },
            {
                action: '18hr',
                headline: 'Recipe to try',
                title: 'Britta Holt',
                subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
            }
        ]
    },
    computed: {
        filteredItems() {
            return _.orderBy(this.items.filter(item => {
                return item.title.toLowerCase().includes(this.search.toLowerCase()) ||
                    item.action.toLowerCase().includes(this.search.toLowerCase()) ||
                    item.headline.toLowerCase().includes(this.search.toLowerCase()) ||
                    item.subtitle.toLowerCase().includes(this.search.toLowerCase());
            }), 'headline');
        }
    },
    methods: {
        toggle(index) {
            const i = this.selected.indexOf(index)
            if (i > -1) {
                this.selected.splice(i, 1)
            } else {
                this.selected.push(index)
            }
        }
    }
})

解決した方法 # 2

これは標準的な方法ではないかもしれませんが、このように試すこともできます...

最初にvモデル search を追加して、検索の入力をフィルター処理しますおよび配列 searchItem 。また、 searchItem を初期化する必要がありますの中にマウントされた 針。次に作成する計算されたプロパティ filteredItems 。正規表現を使用して配列を返す場合の柔軟性のために、.match（）とともに.filter（）を使用しました。

ただし、.includes（）を使用することもできます。これは選択に依存します

HTML（変更）

<v-toolbar>
   <v-text-field
     v-model="search" //add this
     ...
   ></v-text-field>
</v-toolbar>
<v-list two-line>
  <template v-for="(item, index) in filteredItems"> //change items to filteredItems
   ...
  </template>
</v-list>

JS：

data () {
  return {
    search: '',
    selected: [2],
    searchItem: [],
    items: [
       // your items here
    ]
  }
},
mounted() {
  setTimeout(() => this.searchItem = this.items)
},
computed: {
 filteredItems() {
    return this.searchItem.filter((item) =>{
         return item.title.toLowerCase().match(this.search)  || 
                item.headline.toLowerCase().match(this.search) || 
                item.subtitle.toLowerCase().match(this.search) || 
                item.action.toLowerCase().match(this.search)
    })
  }
}

デモ：

更新されたCodepenはこちら

前へ java - JPAクエリ：サブクエリをグループ化条件に結合する

次へ（Javascript）htmlおよびjsでコード内のエラーを見つけるのに助けが必要

Buginfo.Tech