[Vuejs]-Algolia Vue Instant Search – Toggling class is resetting attributes

by

0👍

✅

As pointed out by @StevenB., the issue is the re-rendering of the dom elements, due to the reactive class names.

Specifically, this attribute on the wrapper component:

:class="{active}"

Rerenders all contents including this ais-refinement-list. This is a problem, as when the list is destroyed, the reactive search effectively treats all the non-existent checkboxes as not checked, resetting the search.

It was a simple fix, while not perfectly reactive. I replaced:

toggleActive() {
  this.active = !this.active;
}

With a "vanilla":

toggleActive() {
  document.querySelector("#app").classList.toggle("active");
}

It would also be better to use $refs when available

toggleActive() {
  this.$refs.filters.classList.toggle("active");
}

This means the DOM isn’t re-rendered, the checkboxes aren’t reset, and the search remains the same.

Leave a comment