Question

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

我将在注释中共享完整的代码，您可以在其中看到完整的工作示例。仅在单击搜索按钮之后，该搜索如何过滤？

Answer 1

当您在搜索框中键入内容时，它会立即进行过滤的原因是，filteredItems是一个计算属性，这意味着search的值每次更改都将在每次键入新值时运行字符。

要仅在单击按钮后过滤项目，请从filteredItems中删除computed，并在filterItems下创建一个methods函数，并将该处理程序附加到按钮的单击上事件。

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

<button type="button" class="btn btn-lg btn-danger" @click="filterItems">Search</button>

请注意，我已将函数的结果分配给filteredItems 这是应该添加到data对象中的新属性。

原因是您的filterItems函数不应对原始items进行突变，而应在执行时创建一个新数组，否则如果您对原始项进行突变并再次尝试对其进行过滤，则会导致错误。

因此，在data对象中，添加filteredItems，其初始值将等于items，因为在安装应用程序时尚未对其进行过滤。

const items = [];

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

请参见working implementation。

请注意，当您清除搜索时，我也会调用filterItems()，以便重置数据，但是如果您不希望这样做，可以将其从clearSearch()中删除。

em>

仅在单击按钮后

1 个答案: