Vue - 如何搜索过滤数据中的特定部分？

Question

我正在用 firestore 制作一个小 Vue 应用程序。

我从日期时间选择器中选择数据并将这种格式的数据发送到数据库。

{{date}}：2018-09-15T00:00:00.000Z

这里是 09 显示月份。

我有一个这样的 v-for 循环：

<tbody v-for="item in filteredList">
    <tr>
    <td>{{item.date.slice(0,10)}}</td>
    </tr>
</tbody>

我在 Computed 属性中有这个过滤器：

computed: {
    filteredList() {
        return this.items.filter(item => { return item.date.toLowerCase().includes(this.search.toLowerCase()) })
   }
}

所以我想使用输入搜索或选择下拉菜单，这将根据月份过滤项目：

2018-09-15T00:00:00.000Z 。在这种情况下从 09 开始

我该怎么做？

Answer 1

假设您有一个过滤器（文本、下拉菜单等）

1. 绑定到数据成员filterText。
2. 有一个 2 位字符串值来表示月份。
3. 使用空字符串表示“无过滤器”。

你会这样做：

computed: {
  filteredList() {
    return this.items.filter(item => {
      const field = parseInt(item.date.substring(5, 7)) // the month part of the date

      if (this.filterText === '') return true
      else return field === this.filterText
    })
  }
}

这是一个示例过滤器元素，绑定到filterText

<select v-model='filterText'>
    <option v-for='n in 12' :value='pad2(n)'>{{n}}</option>
</select>

绑定到数据

  data: {
    filterText:'03'
  },

还有一种填充方法

methods: {
     pad2(number) {
  if (number<=99) { number = ("0"+number).slice(-2); }
  return number;
}

Answer 2

如果您经常使用时间，我建议您使用Moment.js，因为它支持大量操作。

Here some more Docs 和 a related SO Post