Мгновенный поиск Algolia Vue - Переключающий класс сбрасывает атрибуты - PullRequest
Новая
       15

Мгновенный поиск Algolia Vue - Переключающий класс сбрасывает атрибуты

0 голосов
/ 15 октября 2019

У меня есть список уточнений Algolia , но каждый раз, когда я переключаю класс вокруг него, запрос исчезает. Я не могу понять, что это сбрасывает значения.

Вот мой текущий пример: 

<template>
  <div id="app" :class="{active}">
    <ais-instant-search :search-client="searchClient" index-name="products">
      <button @click="toggleActive">Toggle</button>
      <span>&larr; Pressing this is wiping the search.</span>
      <div class="dietary-requirements-dropdown--checkboxes">
        <ais-refinement-list attribute="dietary" :sort-by="['name:asc']"></ais-refinement-list>
      </div>
    </ais-instant-search>
  </div>
</template>

<script>
import algoliasearch from "algoliasearch/lite";

export default {
  name: "App",
  data() {
    return {
      active: false,
      searchClient: algoliasearch(
        "ZVIJ67X9P8",
        "df6c2515326327131df74c0a879b8794"
      )
    };
  },
  methods: {
    toggleActive() {
      this.active = !this.active;
    }
  }
};
</script>

<style lang="scss">
.dietary-requirements-dropdown--checkboxes {
  opacity: 1;
  .active & {
    opacity: 0.2;
  }
}
</style>

Демонстрация здесь: https://codesandbox.io/s/vue-template-z5woy

1 Ответ

0 голосов
/ 16 октября 2019

Как указывает @StevenB., Проблема заключается в повторном рендеринге элементов dom из-за имен реактивных классов.

В частности, этот атрибут для компонента-оболочки: 

:class="{active}"

Повторно отображает все содержимое, включая этот ais-refinement-list. Это проблема, поскольку, когда список уничтожается, реактивный поиск эффективно обрабатывает все несуществующие флажки как не , проверенный, сбрасывая поиск.

Это было простое исправление, хотяне совсем реактивный. Я заменил: 

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

на «ваниль»: 

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

Это означает, что DOM не рендерится, флажки не сбрасываются, а поиск остаетсято же самое.

...