ホーム>source

単純な検索と並べ替え機能を追加する必要があります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.'
          }
        ]
      }
    },
  }

あなたの答え
  • 解決した方法 # 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でコード内のエラーを見つけるのに助けが必要