Vue-instantsearch: v2 - document no inline objects & arrays

[chamby]

Feedback on the v2 prerelease version 🆕

Reproduction

https://codesandbox.io/s/0oorzzk3zp

Drill down into the ais-hierarchical-menu. Any selection is fine. The style will update to reflect the choice.

Click the Display buttons to toggle some simple data in the parent component back and forth. The displayMode data is being used in the template for styling the active button. When the parent component re-renders, everything in ais-instant-search state appears to be lost or at least not rendered correctly.

What is the version you are using?

v2.0.0-beta.1

[samouss]

This issue occurs because the attributes provided to the HierarchicalMenu are inline inside the template. On the re-render Vue think that it's a new value and Vue InstantSearch unmount / mount the widget. This operation loose the current refinement. You can "save" the attributes inside data to avoid this issue. Here is your example updated.

[chamby]

Thanks. This is the second time this bit me 😳. This is totally my fault, but you may want to change your docs to at least mention this hazard when you have inline data. See also #567.

Docs that I worked from:
https://v2--vue-instantsearch.netlify.com/components/hierarchicalmenu#usage
https://v2--vue-instantsearch.netlify.com/advanced/vue-router-url-sync.html

[Haroenv]

Going to full data object would add much noise in many cases, so instead we added this FAQ item: https://www.algolia.com/doc/guides/building-search-ui/troubleshooting/faq/vue/#how-do-i-prevent-infinite-loops