Alpine JS для Dynami c выбрать меню - PullRequest
Новая
       20

Alpine JS для Dynami c выбрать меню

1 голос
/ 08 мая 2020

Хотелось бы использовать Alpine. js - для раскрывающейся формы выбора. Когда вы выбираете конкретную опцию из меню выбора, страница вставляет набор связанных записей. Как мне выполнить sh что-то подобное с Alpine? js

Например

  1. Выберите из США, Канады и Мексики из меню выбора. Предположим, был выбран США.
  2. Получить список магазинов в США. (Я знаю, что запросил бы это через PHP, отправив параметр)

1 Ответ

2 голосов
/ 09 мая 2020

Вы можете сделать что-то вроде этого (при условии, что у вас есть все данные заранее) 

<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>
...