Vuetify에 검색 및 정렬 기능 추가VueJ 2가 있는 JS 리스트

Vuetify에 검색 및 정렬 기능 추가VueJ 2가 있는 JS 리스트

Vuetify에 간단한 검색 및 정렬 기능을 추가해야 합니다.JS 리스트다음은 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.'
          }
        ]
      }
    },
  }

클래스에 계산된 속성을 정의하고 필터를 수행할 수 있습니다.이 계산된 속성을 필터링 및 정렬 함수로 사용할 수 있습니다.

여기 코드펜이 있습니다

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)
            }
        }
    }
})

이게 표준적인 방법이 아닐 수도 있지만 이렇게도 해볼 수 있어요.

v-model을 추가하여 검색에서 입력을 먼저 필터링합니다.search및 배열searchItem또, 초기화할 필요가 있습니다.searchItem설치 후크 안에 있습니다.그런 다음 계산된 속성을 생성합니다. filteredItems. regex를 사용할 경우 어레이가 반환되는 경우 유연성을 위해 .filter()와 .match()를 사용했습니다.

그러나 선택 내용에 따라 .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은 이쪽

언급URL : https://stackoverflow.com/questions/51929431/add-search-and-sort-functionality-to-vuetifyjs-list-with-vuejs-2