CODEWITHSUNDEEP
vue.js
Ilse Van Dommelen
Ilse Van Dommelen

Reputation: 51

v-model input working after pressing enter

I am working in Vue

My input search bar is filtering after every letter that I type. I want it to filter after I pressed the enter key.

Can somebody help me please?

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

Upvotes: 1

Views: 1637

Answers (2)

Phil
Phil

Reputation: 164766

You could skip using v-model and instead add a keyup event handler with the .enter modifier that sets the search data property

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

Demo...

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>

Upvotes: 0

David Weldon
David Weldon

Reputation: 64312

There are a few ways you could accomplish this. Probably the most accessible would be to wrap the input in a form and then user the submit event to track the value you want to search for. Here's an example:

<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;
    },
  },
};

Notice that blogSearch will only be set once the form has been submitted (e.g. enter pressed inside the input).

Other notes:

  • You'll probably want to trim your search value
  • You should add a label to your input.

Upvotes: 1

Related Questions