alpinejs examples stackoverflow

1<div 
2  x-data="{ selectedCountry: null, countries: [ 'Mexico', 'USA', 'Canada' ], storesByCountry: { 'USA': [ { 'store' : 'data' } ] } }"
3>
4  <select x-model="selectedCountry">
5    <template x-for="country in countries" :key="country">
6      <option :value="country" x-text="country"></option>
7    </template>
8  </select>
9  Stores:
10  <template x-for="store in storesByCountry[selected country] || []" :key="store.id">
11
12  </template>
13</div>
14

1<div 
2  x-data="{ selectedCountry: null, countries: [ 'Mexico', 'USA', 'Canada' ],  stores: [ { 'store' : 'data' } ] }"
3  x-init="$watch('selectedCountry', (country) => { fetch('url?country=" + country).then(res=> res.json()).then((storeData) => { stores = storeData }) })"
4>
5  <select x-model="selectedCountry">
6    <template x-for="country in countries" :key="country">
7      <option :value="country" x-text="country"></option>
8    </template>
9  </select>
10  Stores:
11  <template x-for="store in stores" :key="store.id">
12
13  </template>
14</div>
15