Alpine. js Форма имеет множественный выбор, Как получить значения параметра? - PullRequest
Новая
       32

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

0 голосов
/ 26 апреля 2020

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

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

Примечания:

  • Я не , использующий 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
    },
  };
};

1 Ответ

0 голосов
/ 29 апреля 2020

Для потомков мы обсуждали это через другой канал, но способ решить эту проблему - использовать один альпийский компонент (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/

...