Vue Js ais-numeric-menu count

[britisharmy]

I have an ais-numeric component that i want to use and it would be useful if we had count so that we show a label nd count side by side

I have this

<ais-numeric-menu
				  attribute="price_per_night"
				 :items="[
								{ label: 'All' },
								{ label: '<= 10$', end: 10 },
								{ label: '10$ - 100$', start: 10, end: 100 },
								{ label: '101$ - 200$', start: 101, end: 200 },
								{ label: '>= 200$', start: 201 },
				]"
				>
  <ul slot-scope="{ items, refine, createURL, sendEvent }">
    <li v-for="item in items" :key="item.value">
      <a
        :href="createURL(item.value)"
        :style="{ fontWeight: item.isRefined ? 'bold' : '' }"
        @click.prevent="refine(item.value)"
      >
        {{ item.label }} - {{ item.count }}
      </a>
    </li>
  </ul>
</ais-numeric-menu>

which doesn't return a count. Is there a way i can return a count?
Thanks

[Haroenv]

Unfortunately numbers are infinite, so we can't actually show a count of all the buckets. The workaround is making sure the ranges are available ahead of time. You can do that by making your record something like this:

[
{
  "range": "5 - 10"
},
{
  "range": "10 - 15"
}
]

If you make that range attribute an attributeForFaceting, you can use menu or refinement-list for refining with a count available.

[britisharmy]

Indeed this is what i have done and everything works great. However, i am trying to use facetFilters with ais-configure

<ais-configure :facetFilters="filters" />

and in my data filters: 'deal:"Deal"', however,i get the error facetFilters.map is not a function . How can i pass facet filters in my configure?

Thanks.

[Haroenv]

facetFilters is meant to be an array, not a string, you probably are looking for the parameter filters

[britisharmy]

I am doing exactly as this example says https://codesandbox.io/s/l6lpz6xx9?file=/src/App.vue:1675-1686 but i can't get to pass the filters. But no problem, i shall have it fixed. Thanks

[Haroenv]

in your code you write facetFilters, but in the example it's filters, do you have a live version of your code?

[britisharmy]

I had that fixed using a helper object but now i cant figure out how to actually pass a variable to the helper

<ais-instant-search index-name="properties" :search-client="searchClient" :search-function="searchFunction">
<ais-configure v-bind="searchParameters" />

	  searchParameters: {
        facets: ['price_per_night'],
      },
      searchFunction(helper) {
        //helper.addFacetRefinement('deal', 'deal').search();
        helper.addFacetRefinement('price_per_night', ' > 10').search();
      },

Instead of > 10 i want this to come from the user. price_per_night is numeric.

Error with filter field price_per_night: Numerical field has an invalid comparator. is the error i am getting

This is my data object

data() {
    return {
      searchClient,
	  range_price: '>10',
	  searchParameters: {
        facets: ['price_per_night'],
      },
      searchFunction(helper) {
        //helper.addFacetRefinement('deal', 'deal').search();
        helper.addFacetRefinement('price_per_night', this.range_price).search();
      },

Update:

had the method in the wrong place the entire place ;)

  searchFunction(helper) {
    //helper.addFacetRefinement('deal', 'deal').search();
	alert(this.range_price);
    helper.addFacetRefinement('price_per_night', this.range_price).search();
  },

belongs to the method block on vue js.