Заставить панель поиска работать в AlpineJS, когда искомые элементы в x-data приходят из x-init

В основном пытаюсь модифицировать динамическую панель поиска, которую можно найти в документации Alpine, но с "элементами" ("bands" в моем случае), приходящими из x-init, который получает JSON. Вне этой строки поиска все нужные данные из этого JSON отображаются, так что не похоже, что сам JSON пуст, но в этой конкретной ситуации x-text даже не перечисляет никаких значений, как будто данные JSON никогда не попадают в массив x-data/"bands"

Вот что у меня сейчас есть, как я уже сказал, это небольшая модификация строки поиска из документации 

<div x-data="{
        search: '', 
        bands: [], 
        get filteredItems() {
            return this.bands.filter(
                i => i.startsWith(this.search)
            )
        }
    }"  x-init="bands = await (await fetch('/bands/')).json()">
    <input x-model="search" placeholder="Search...">
 
        <template x-for="band in filteredItems" :key="band">
            <p x-text="`${band.name}`"></p>
        </template>

</div>

Буду благодарен, если кто-нибудь подскажет мне, чего именно не хватает в этом, казалось бы, простом куске кода.

Похоже, что в представленном вами коде не хватает нескольких ключевых элементов, необходимых для правильной работы строки поиска.

Во-первых, похоже, что вы пытаетесь использовать метод startsWith для массива bands, но похоже, что массив bands - это массив объектов, а не строк. Метод startsWith доступен только для строк, поэтому вам нужно будет настроить условие фильтрации в соответствии со свойствами объектов в массиве bands.

Во-вторых, вы пытаетесь отобразить свойство name каждого объекта группы, но из представленного вами кода не ясно, откуда вы берете свойство name. Убедитесь, что ваши JSON-данные содержат свойство 'name' объекта band.

Последнее: похоже, что вы используете директиву x-init для получения данных JSON, но директива x-init не используется для получения данных. Она используется для инициализации данных и выполнения любых настроек, которые необходимы перед отображением компонента. Вместо этого вы можете использовать метод жизненного цикла mounted() для получения данных, а затем сохранить их в массиве bands.

Вот пример того, как можно изменить ваш код, чтобы он работал:

<div x-data="{
        search: '', 
        bands: []
    }"  x-init="mounted()">
    <input x-model="search" placeholder="Search...">
 
        <template x-for="band in bands" :key="band.id">
            <p x-text="band.name"></p>
        </template>

</div>
<script>
    function mounted() {
        fetch('/bands/')
        .then(response => response.json())
        .then(data => {
            this.bands = data.filter(band => band.name.startsWith(this.search))
        })
    }
</script>

Эта модификация будет получать данные JSON и сохранять их в массиве bands, а затем использовать метод жизненного цикла mounted() для фильтрации данных с помощью поискового ввода и метода startsWith. В результате будут отображены названия объектов band, которые соответствуют введенным данным поиска.

<div x-data="{search: '', bands: [], 
  get filteredItems() {
    return this.bands.filter(i => i.name.toLowerCase().includes(this.search))
    }
  }" x-init="bands = await (await fetch('/bands/')).json()">
      <input x-model="search" placeholder="Search...">
   
          <template x-for="band in filteredItems" :key="band.name">
              <p x-text="band.name"></p>
          </template>
  
  </div>

Этот ответ был размещен как edit на вопрос [Решено] Заставить работать строку поиска в AlpineJS, где искомые элементы в x-data приходят из x-init от OP dirt1992 под CC BY-SA 4.0.

Вернуться на верх