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

我需要添加一个简单的搜索和排序功能。 下面是列表的CodePen示例：

在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>

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

---

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

这是

---

这可能不是标准的方法，但你也可以这样尝试

首先通过添加v型

搜索

和数组

搜索项

来过滤搜索中的输入。您还需要在挂载的钩子中初始化

searchItem

。然后创建一个计算属性

filteredItems

。如果使用regex并返回一个数组，那么我已经使用了，以获得灵活性

但你也可以使用它，这取决于你的选择

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>

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

---

您更新的代码笔

谢谢，但在VueJS 2中，

| orderBy'title'

似乎不再有效。您会为VueJS 2推荐什么？是的。你说得对。我差点忘了。您应该使用loadash（\ux）在计算属性内对列表进行排序。此外，您还应该从模板中删除orderBy'title'。类似这样的内容：

return\uu.orderBy（item.title.includes（this.search），“title”）

谢谢，效果很好，但是如何从按钮重置搜索？我为您的示例笔更新了文本字段的可清除选项：单击后如何显示所有条目？您应该手动处理清除按钮事件。我已经编辑了我的谢谢，但是我得到了这个错误：箭头函数不应该为这个返回赋值：

setTimeout（（）=>this.searchItem=this.items）

需要更改什么？你可以使用普通的setTimeout（）函数，或者让它成为

this.searchItem=this.items

你检查过代码笔吗？即使我在我的电脑上试用过，它也可以正常工作。我猜是因为“babel eslint”：“^8.0.1”或“eslint”：“^4.9.0”在我的设置中？

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