使用 VueJS 2 向 VuetifyJS 列表添加搜索和排序功能

Question

我需要向VuetifyJS list添加一个简单的搜索和排序功能。这是列表的 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.'
          }
        ]
      }
    },
  }

Answer 1

这可能不是标准方式，但您也可以这样尝试...

首先通过添加 v-modelsearch和 array 来过滤搜索中的输入searchItem。您还需要searchItem在挂载的钩子中进行初始化。然后创建一个计算属性 filteredItems。如果您将使用正则表达式并返回一个数组，我已经将.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在这里

Answer 2

您可以在类中定义计算属性并执行过滤器。您可以将此计算属性用作过滤和排序功能。

这是代码笔

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