VueJS | Filter API data based on selected check boxes or typed in text into input field

Question

I am currently trying to create filter based on selected checkboxes or typed in value into input field.

Some bits of the code are working but not all features are working correctly.

Requirements:

• The content being filtered based on input value
• The content being filtered based on selected one checkbox / multiple check-boxes

Here is JSFiddle: https://jsfiddle.net/Ksistof/01x839z2/3/

HTML/VUE

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js" 
integrity="sha256-Gs0UYwrz/B58FsQggzU+vvCSyG/pewemP4Lssjzv8Ho=" 
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-
resource.min.js" integrity="sha256-
OZ+Xidb5+lV/saUzcfonHJQ3koQncPy0hLjT8dROdOU=" crossorigin="anonymous">
</script>

<div id="app">
 <h2>Fetched data from jsonplaceholder</h2>
 Search by title: <input type="text" v-model="search">
 <br><br>

<lable>sunt</lable><input type="checkbox" v-model="search" value="sunt">
<lable>esse</lable><input type="checkbox" v-model="search" value="esse">

 <ul>
  <li v-for="apiRequest in filteredBlogs">
   <h4>{{ apiRequest.title }}</h4>
   <p>{{ apiRequest.body }}</p>
  </li>
 </ul>
</div>

JS

Vue.use(VueResource)

var app = new Vue({
el: '#app',

data() {
return {
  apiRequests:[],
  search: []
 }
},

// Filter for Displaying blogs
computed: {
 filteredBlogs: function() {
  return this.apiRequests.filter((apiRequest) => {
    return apiRequest.title.match(this.search);
  })
 }
},

// Getting data from API
created() {

 this.$http.get('https://jsonplaceholder.typicode.com/posts')
  .then(function(data) 
 {
  this.apiRequests = data.body.slice(0,5);
  console.log(data);
 })
}

})

Thank you in advance!

Answer 1

I think the better solution is split search object to query string from textbox and array for checkbox and computed them.

Check this out: https://jsfiddle.net/w7tuqvbr/

If you want use logic operator OR not AND change this function:

.every(x => apiRequest.title.indexOf(x) > -1);

to

.some(...)

Answer 2

Here is the updated code - https://jsfiddle.net/01x839z2/4/

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js" integrity="sha256-Gs0UYwrz/B58FsQggzU+vvCSyG/pewemP4Lssjzv8Ho=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js" integrity="sha256-OZ+Xidb5+lV/saUzcfonHJQ3koQncPy0hLjT8dROdOU=" crossorigin="anonymous"></script>

<div id="app">
  <h2>Fetched data from jsonplaceholder</h2>
  Search by title: <input type="text" v-model="search"> <br><br>

  <lable>sunt</lable><input type="checkbox" value="sunt" v-on:change="filter">
  <lable>esse</lable><input type="checkbox" value="esse" v-on:change="filter">

  <span v-if="filterText">Filtered with <b>{{ filterText }}</b></span>

  <ul>
    <li v-for="apiRequest in filteredBlogs">
      <h4>{{ apiRequest.title }}</h4>
      <p>{{ apiRequest.body }}</p>
    </li>
  </ul>
</div>

JS

Vue.use(VueResource)

var app = new Vue({
    el: '#app',

  data() {
    return {
      apiRequests:[],
      search: '',
      filterText: '',
    }
  },

  // Filter for Displaying blogs
  computed: {
    filteredBlogs() {
      return this.apiRequests.filter((apiRequest) => {
        let regexp = new RegExp(`(?=.*${this.filterText})(?=.*${this.search})`, 'g');
        return apiRequest.title.match(regexp);
      })
    }
  },

  // Getting data from API
  created() {
    this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function(data) {
      this.apiRequests = data.body.slice(0,5);
      console.log(data);
    })
  },

  methods: {
    filter(event) {
        this.filterText = event.target.checked ? event.target.value : '';
    }
  }

})

Copy and pasted from JSFiddle and i hope this what you're looking for.

Answer 3

我在https://github.com/rojaware/vue.js-v2-crud-application/blob/master/README.md上做了输入选择过滤器