用于动态 select 菜单的 AlpineJS

Question

希望能够使用 Alpine.js 来创建下拉 select 表单。当您从 select 菜单中 select 一个特定选项时，页面会插入一组相关记录。我如何用 Alpine.js

完成这样的事情

例如

Select 来自美国、加拿大和墨西哥的 select 菜单。假设美国 selected
检索美国商店列表。（我知道我会通过 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>

用于动态 select 菜单的 AlpineJS

AlpineJS for dynamic select menu

alpine.js