Question

我正在Vue工作

我输入的搜索栏在输入的每个字母之后进行过滤。我希望在按Enter键后对其进行过滤。

有人可以帮我吗？

<template>
  <div id="show-blogs">
    <h1>All Blog Articles</h1>
    <input type="text" v-model="search" placeholder="Find Car" />
    <div v-for="blog in filteredBlogs" :key="blog.id" class="single-blog">
      <h2>{{blog.title | to-uppercase}}</h2>
      <article>{{blog.body}}</article>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blogs: "",
      search: ""
    };
  },
  methods: {},
  created() {
    this.$http
      .get("https://jsonplaceholder.typicode.com/posts")
      .then(function(data) {
        // eslint-disable-next-line
        console.log(data);
        this.blogs = data.body.slice(0, 10);
      });
  },
  computed: {
    filteredBlogs: function() {
      return this.blogs.filter(blog => {
        return blog.title.match(this.search);
      });
    }
  }
};
</script>

Answer 1

有几种方法可以完成此操作。可能最可访问的方法是将input包裹在form中，然后使用submit事件来跟踪您要搜索的值。这是一个示例：

<template>
  <div id="show-blogs">
    <h1>All Blog Articles</h1>
    <form @submit.prevent="onSubmit">
      <input v-model="search" type="text" placeholder="Find Car" />
    </form>
  </div>
</template>

export default {
  data() {
    return {
      search: '',
      blogSearch: '',
    };
  },
  computed: {
    filteredBlogs() {
      return this.blogs.filter(blog => {
        return blog.title.match(this.blogSearch);
      });
    },
  },
  methods: {
    onSubmit() {
      this.blogSearch = this.search;
    },
  },
};

请注意，blogSearch仅在提交表单后才设置（例如，在输入中按下enter）。

其他说明：

您可能想要trim您的搜索值
您应该在输入中添加label。

Answer 2

您可以跳过使用v-model的情况，而是添加带有.enter modifier的keyup事件处理程序，该事件处理程序设置search数据属性

<input type="text" :value="search" placeholder="Find Car" 
       @keyup.enter="search = $event.target.value" />

演示...

new Vue({
  el: '#app',
  data: () => ({ search: '' })
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <input type="text" :value="search" placeholder="Find Car" 
         @keyup.enter="search = $event.target.value" />
  <pre>search = {{ search }}</pre>
</div>

v模型输入在按Enter键后工作

2 个答案: