AlpineJS для динамического меню выбора

Question

Хотелось бы использовать Alpine.js для раскрывающейся формы выбора. Когда вы выбираете конкретную опцию из меню выбора, страница вставляет набор связанных записей. Как мне сделать что-то подобное с помощью Alpine.js

Например

1. Выберите США, Канаду и Мексику из меню выбора. Предположим, США были выбраны
2. Получить список магазинов в США. (Я знаю, что запросил бы это через PHP, отправив параметр)

---

Answer 1

Вы можете сделать что-то подобное (при условии, что у вас есть все данные заранее)

<div 
  x-data="{ selectedCountry: null, countries: [ 'Mexico', 'USA', 'Canada' ], storesByCountry: { 'USA': [ { 'store' : 'data' } ] } }"
>
  <select x-model="selectedCountry">
    <template x-for="country in countries" :key="country">
      <option :value="country" x-text="country"></option>
    </template>
  </select>
  Stores:
  <template x-for="store in storesByCountry[selected country] || []" :key="store.id">

  </template>
</div>

Если у вас нет данных, вам нужно сделать что-то вроде этого

<div 
  x-data="{ selectedCountry: null, countries: [ 'Mexico', 'USA', 'Canada' ],  stores: [ { 'store' : 'data' } ] }"
  x-init="$watch('selectedCountry', (country) => { fetch('url?country=" + country).then(res=> res.json()).then((storeData) => { stores = storeData }) })"
>
  <select x-model="selectedCountry">
    <template x-for="country in countries" :key="country">
      <option :value="country" x-text="country"></option>
    </template>
  </select>
  Stores:
  <template x-for="store in stores" :key="store.id">

  </template>
</div>