用于动态选择菜单的 AlpineJS

Posted

技术标签:

【中文标题】用于动态选择菜单的 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 指令添加到未触发的

以上是关于用于动态选择菜单的 AlpineJS的主要内容,如果未能解决你的问题,请参考以下文章