Vuejs2 如何使此搜索代码仅在单击按钮后过滤结果

我在codepen上找到了这段代码，并对其进行了一些更改。我尝试在单击搜索按钮后过滤结果。但关键是，现在当你在搜索框中输入时，它会立即过滤

代码如下：

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 => {
              if(!this.search) return this.items;
                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: {
      clearSearch () {
        this.search="";
      },
        toggle(index) {
            const i = this.selected.indexOf(index)

            if (i > -1) {
                this.selected.splice(i, 1)
            } else {
                this.selected.push(index)
            }
        }
    }
})

---

我将在评论中分享完整的代码，在这里您可以看到一个完整的工作示例。该搜索如何仅在单击搜索按钮后进行过滤？

当您在搜索框中键入内容时，它会立即进行过滤的原因是，

filteredItems

是一个计算属性，这意味着它将在每次键入新字符时，

search

的值更改时运行

要仅在单击按钮后过滤项目，请从

computed

中删除

filteredItems

，并在

方法下创建
filteredItems
函数，并将该处理程序附加到按钮的单击事件

methods: {
  filterItems() {
    this.filteredItems = _.orderBy(
      this.items.filter(item => {
        if (!this.search) return this.items;
        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"
    );
  } 
}

看

请注意，当您清除搜索以重置数据时，我也会调用
filteriems（）
，但如果您不希望出现这种行为，可以将其从
clearSearch（）
中删除。
以下是完整的示例：非常感谢您的帮助。还有一个问题。如果将有分页或无限滚动，那么它将过滤所有结果还是只过滤第一页结果？它将只过滤当前存储的
项目
，即当前页面的项目。通常支持使用过滤器过滤整个列表而不是仅过滤第一页吗？我这样问是因为我们在Angular中也有类似的情况，如果这样的过滤器可以支持过滤整个列表，这很有趣。如果在当前实现中使用分页，它将只过滤当前页面下的项目，而不会过滤整个列表，当然，除非，您运行的API请求将返回过滤后的数据，而不仅仅是在当前存储的项之间循环。确定。非常感谢：）
<button type="button" class="btn btn-lg btn-danger" @click="filterItems">Search</button>

const items = [];

new Vue({
  data: {
    filteredItems: items,
    items: items
  }
})