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://stackoverflow.com/a/46903870/4489222

如果您想使用逻辑运算符或不使用AND更改此函数：

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

到

.some(...)

Answer 2

以下是更新后的代码 - 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 : '';
    }
  }

})

从JSFiddle复制并粘贴，我希望这是您正在寻找的。

Answer 3

我在https://github.com/rojaware/vue.js-v2-crud-application/blob/master/README.md

上制作了输入选择过滤器

VueJS |根据选中的复选框过滤API数据，或在文本中键入输入字段

3 个答案: