如何在vue js的过滤器搜索中添加大于等于的条件

Posted

技术标签:

【中文标题】如何在vue js的过滤器搜索中添加大于等于的条件【英文标题】:how to add a condition like a greater than equal to in filter search in vue js 【发布时间】:2019-05-25 05:12:11 【问题描述】:

大家好,我要构建一个房地产应用程序 我想在卧室过滤功能中添加一个条件,例如“大于等于”

例如:- 如果我在卧室列表中选择 2,我想过滤大于等于 2 间卧室的属性

我该怎么做

export default 
  data() 
    return 
      blogs: [],
      minbed: this.$route.params.bed,
    
  ,
  created() 
    this.$http.get("https://test.json").then(function(data) 
      console.log(data);
      this.blogs = data.body;
    );
  ,
  computed: 
    filteredList() 
      const  blogs, search, UnitType  = this;
      return this.blogs
        .filter(blog => blog.Bedrooms.includes(this.minbed))
  
<select
  v-model="minbed"
  id="formInput202"
  class="form-control"
  value="MaxBedrooms"
>
  <option>Max.Bedrooms</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>ST</option>
</select>

【问题讨论】:

导出属于你的&lt;select&gt;? 是的,出口属于 你能否尝试将MaxBedrooms 值作为对象传递,例如['1','2'] for select 2,includes 将接受多个值。 它不工作 当它不询问npmjs.com/package/vue-select时为什么会有vue-select标签? 【参考方案1】:

includes 方法在这种情况下不起作用。只接受字符串作为参数(Ref-Link1)。

内联回调函数会理清这种情况,

检查下面的代码。

filteredList() 
    const  blogs, search, UnitType  = this;
    var MaxBedroomsVal = this.minbed;
    return this.blogs.filter( function (blog)  
        return blog.Bedrooms >= MaxBedroomsVal;
    )

参考:Link2

【讨论】:

以上是关于如何在vue js的过滤器搜索中添加大于等于的条件的主要内容,如果未能解决你的问题,请参考以下文章

为啥我在 vue.js 中的自定义搜索过滤器不起作用?

计算与搜索条件匹配的所有行

Vue,品牌列表案例(仅添加,删除,搜索,全局过滤器,私有过滤器)

使用具有多个搜索条件的 Knex.js 和 SQL 的条件过滤器

如何在Vue.js中正确添加条件事件绑定?

如何在按钮标签中添加条件? (vue.js 2)