用于动态选择菜单的 AlpineJS

Posted 2023-03-07

【中文标题】用于动态选择菜单的 AlpineJS

【英文标题】：AlpineJS for dynamic select menu

【发布时间】：2020-08-24 07:59:40

【问题描述】：

希望能够使用 Alpine.js 来创建下拉选择表单。当您从选择菜单中选择特定选项时，页面会插入一组相关记录。我将如何使用 Alpine.js 完成这样的事情

例如

从选择菜单中选择美国、加拿大和墨西哥。假设选择了美国 检索美国的商店列表。 （我知道我会通过 php 查询这个，发送一个参数）

---

【参考方案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>

【讨论】：

为了更新 selectedCountry 变量，我尝试将 x-on:click 指令添加到未触发的 标记中。你知道有没有办法解决这个问题？