`ais-configure` in `vue-instantsearch` doesn't handle `facet-filters.camel`

[Jordan Jensen]

🐛 Current behavior

In a Vue component I have ais-configure setup like so:

<ais-configure
  :hits-per-page.camel="4"
  :attributes-to-snippet.camel="['content', 'title']"
  :click-analytics.camel="true"
  :facet-filters.camel="facetFilters"
/>

Where faceFilters is a pointing to a computed property.

This works fine if I pass facetFilters like so

<ais-configure
  :hits-per-page.camel="4"
  :attributes-to-snippet.camel="['content', 'title']"
  :click-analytics.camel="true"
  :facetFilters="facetFilters"
/>

But when passing using .camel I get this error in the console when I type any input to search:

Uncaught (in promise) ApiError: Unknown parameter: facet-filterscamel

---

I am working around this by using facetFilters and since I use Vue's ESLint recommendations I am disabling the vue/attribute-hyphenation rule on files that are affected by this bug.

🔍 Steps to reproduce

1. Pass the facet filters prop to ais-configure using facet-filters.camel
2. Attempt to search

Live reproduction

https://codesandbox.io/s/inspiring-stonebraker-yjmwkl?file=/src/App.vue

💭 Expected behavior

I would expect variations of prop passing to ais-configure to work. Vue's ESLint plugin recommends use of hyphenated attribute names.

Package version

vue-instantsearch 4.8.3, algoliasearch 4.14.3, search-insights 2.2.3

Operating system

12.6

Browser

Chrome 111.0.5563.110

Code of Conduct

• I agree to follow this project's Code of Conduct

[Haroen Viaene]

This is actually expected with how Vue works. If you don't add a : before the attribute, .camel has no effect, and will be part of the attribute as-is. The correct behaviour would be what you wrote in the issue already (but not in the sandbox for some reason).

see: https://codesandbox.io/s/gallant-morning-gfziw1

<ais-configure
  :hits-per-page.camel="4"
  :attributes-to-snippet.camel="['content', 'title']"
  :click-analytics.camel="true"
  :facet-filters.camel="facetFilters"
/>

I'll close the issue for now, but if you have a new reproduction, we'll take a look at it!

[Jordan Jensen]

This is actually expected with how Vue works. If you don't add a : before the attribute, .camel has no effect, and will be part of the attribute as-is. The correct behaviour would be what you wrote in the issue already (but not in the sandbox for some reason).

I'll close the issue for now, but if you have a new reproduction, we'll take a look at it!

You are totally right. In the component I was working with we had both types of usages - one binding, one not. I honed in on the wrong one. Thanks for helping me identify that, and I apologize for the false alarm. 😄

[Haroen Viaene]

No worries, glad that was the issue!