Форма Alpine.js имеет несколько вариантов выбора, как получить значения параметров?

Question

Используя Alpine.js, как получить значение select1 или select2 в основном form() функция?

Я могу это сделать, если не использую x-data на Selects, но тогда вам придется делать забавные вещи с open переменная, поэтому она уникальна для каждого элемента Select (если вы этого не сделаете, то все элементы выбора открываются одновременно).

Заметки:

• Я не используюx-forдля итерации входных данных Select Option, потому что из соображений производительности я предварительно визуализирую их в HTML. У них есть иконы, а их более 250.
• Это @click="$dispatch('input', 'option1Key')" это лучший способ установить значение выбранной опции, так как не используется фактический вход выбора и x-for?

<div x-data="form()">

  <!-- snip other fields like regular inputs -->

  <label for="select-1">Select 1</label>
  <div x-data="{ select1: '', open: false }">
    <div>Selected: <span x-text="select1"></span></div>
    <button @click="open=true">Select ...</button>
    <ul x-show="open" @click.away="open=false" x-model="select1" style="display: none;">
      <li @click="$dispatch('input', 'option1Key')"><i class="icon"></i> Option1</li>
      <li @click="$dispatch('input', 'option2Key')"><i class="icon"></i> Option2</li>
    </ul>
  </div>

  <label for="select-2">Select 2</label>
  <div x-data="{ select2: '', open: false }">
    <div>Selected: <span x-text="select2"></span></div>
    <button @click="open=true">Select ...</button>
    <ul x-show="open" @click.away="open=false" x-model="select2" style="display: none;">
      <li @click="$dispatch('input', 'option1Key')"><i class="icon"></i> Option1</li>
      <li @click="$dispatch('input', 'option2Key')"><i class="icon"></i> Option2</li>
    </ul>
  </div>

  <button class="search" type="submit" :disabled="loading" @click="search()">Search</button>

</div>

<script>
function form() {
  return {
    select1: '',
    select2: '',
    search() {
      console.log(select1); // undefined
      console.log(select2); // undefined
    },
  };
};

Answer 1

Для потомков мы обсуждали это через другой канал, но способ решить эту проблему - использовать один компонент Alpine (x-data).

<div x-data="f()">

  <!-- snip other fields like regular inputs -->

  <div class="select">
    <label for="select-1">Select 1 Label</label>
    <div>
      <div class="output">x-text "select1": <span x-text="select1"></span></div>
      <button @click="open='select1'">Click to Select1 ...</button>
      <ul x-show="open === 'select1'" @click.away="open=null" x-model="select1">
        <li @click="$dispatch('input', 'option1Key')"><i class="icon"></i> Option1</li>
        <li @click="$dispatch('input', 'option2Key')"><i class="icon"></i> Option2</li>
      </ul>
    </div>
  </div>

  <div class="select">
    <label for="select-2">Select 2 Label</label>
    <div>
      <div class="output">x-text "select2": <span x-text="select2"></span></div>
      <button @click="open='select2'">Click to Select2 ...</button>
      <ul x-show="open === 'select2'" @click.away="open=null" x-model="select2">
        <li @click="$dispatch('input', 'option1Key')"><i class="icon"></i> Option1</li>
        <li @click="$dispatch('input', 'option2Key')"><i class="icon"></i> Option2</li>
      </ul>
    </div>
  </div>

  <button class="search" type="submit" :disabled="loading" @click="search()">Search</button>

</div>

Сценарий

function f() {
  return {
    open: null,
    loading: false,
    select1: '',
    select2: '',
    search() {
      console.log('select1 value: ' + "'" + this.select1 + "'"); // ''
      console.log('select2 value: ' + "'" + this.select2 + "'"); // ''
    },
  };
}

Рабочая скрипка заливки находится по адресу https://jsfiddle.net/w7hg341m/9/.