Скрыть сообщение по умолчанию виджета ais-state-results

Question

Я использую ais-instant-search а также ais-state-results отображать мои данные. Я скрываю результат до query.length > 0, Это работает, но если я не ввожу строку поиска, она всегда показывает сообщение. Ниже мой код и скриншот:

<ais-state-results>
            <p slot-scope="{ query, hits }" v-if="!hits.length">
                Not found for: <q>{{ query }}</q>
            </p>
            <template v-else slot-scope="{ query }">
                <ais-hits v-if="query.length > 0">
                    <template slot="item"
                            slot-scope="{ item }"
                    >
                        <h1>
                            <ais-highlight
                                    :hit="item"
                                    attribute="name"
                            />
                        </h1>

                        <ul>
                            <li>{{ item.price }}</li>
                        </ul>

                    </template>
                </ais-hits>
            </template>
        </ais-state-results>

Answer 1

Виджет <ais-state-results> содержит резервный контент, который отображается, когда слот по умолчанию пуст (это скриншот, который вы дали). Оба условия, которые вы написали в своем примере, ложны после запуска приложения. Поскольку в слоте ничего не отображается, срабатывает по умолчанию. Эту проблему можно решить с помощью пустогоdivкогда ни одно из условий не выполнено. Вот пример:

<ais-state-results>
  <template slot-scope="{ query, hits }">
    <!-- First condition -->
    <p v-if="!hits.length">Not found for: <q>{{ query }}</q></p>
    <!-- Second condition -->
    <ais-hits v-else-if="query" />
    <!-- Fallback condition -->
    <div v-else />
  </template>
</ais-state-results>

Вы можете найти живой пример на CodeSandbox.