alpine.js - AlpineJS 用于动态选择菜单

Question

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

例如

从选择菜单中选择美国、加拿大和墨西哥。假设美国被选中

检索美国的列表商店。 (我知道我会通过 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>