javascript - VueJS |根据选定的复选框或在输入字段中输入文本来过滤 API 数据

Question

我目前正在尝试根据选定的复选框或在输入字段中输入的值来创建过滤器。

部分代码可以正常工作，但并非所有功能都可以正常工作。

要求:

• 根据输入值过滤内容
• 根据选定的一个/多个复选框过滤内容

这是 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);
 })
}

})

提前谢谢您!

Answer 1

我认为更好的解决方案是将搜索对象拆分为从文本框和复选框数组中查询字符串并计算它们。

看看这个:https://jsfiddle.net/w7tuqvbr/

如果您想使用逻辑运算符“OR”而不是“AND”更改此函数:

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

至

.some(...)