Alpine.js 表单有多项选择，如何获取选项值？答案

【问题标题】：Alpine.js Form has Multiple Selects, How to get Option values?Alpine.js 表单有多项选择，如何获取选项值？
【发布时间】：2020-08-09 14:14:45
【问题描述】：

使用 Alpine.js 如何在 form() 主函数中获取 select1 或 select2 的值？

如果我不在 Selects 上使用 x-data，我可以做到这一点，但是你必须使用 open 变量做一些时髦的事情，所以它对于每个 Select 都是唯一的（如果你不这样做，那么所有选择立即打开）。

注意事项：

我不使用x-for 来迭代选择选项输入，因为出于性能原因，我在 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
    },
  };
};

【问题讨论】：

标签： javascript html forms alpine.js

【解决方案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/

【讨论】：