Alpine js - 为什么 x-data 变量“未定义”答案

【问题标题】：Alpine js - why is an x-data variable 'undefined'Alpine js - 为什么 x-data 变量“未定义”
【发布时间】：2022-01-22 13:53:00
【问题描述】：

我正在尝试使用选择选项中的值来更新下拉列表的更改事件中的 x-data“选项卡”，但变量为“未定义”。

<div class="py-0 space-y-6 bg-white" **x-data**="{ tab: 'payment_methods' }">
    <div class="py-6 mb-4 md:px-14 sm:px-14 px-4">
        <!-- Tabs -->
        <div class="lg:hidden">
          <label for="selected-tab" class="sr-only">Select a tab</label>
          <select  
            @change="tab = $event.target.value"
            id="selected-tab" name="selected-tab" 
            class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md">
              <option x-bind:value="merchant">Merchantz</option>
              <option x-bind:value="psps">PSPs</option>
              <option x-bind:value="payment_methods">Payment methods</option>
              <option>Billing</option>
              <option>Team Members</option>
          </select>
        </div>
    </div>
</div>

【问题讨论】：

标签： alpine.js

【解决方案1】：

感谢https://stackoverflow.com/a/63156115/4167547我解决了这个问题通过将 x-model="tab" 添加到选择标签。

<div class="sm:rounded-md sm:overflow-hidden shadow">
    <div class="py-0 space-y-6 bg-white" x-data="{ tab: 'payment_methods' }">
      <div class="py-6 mb-4 md:px-14 sm:px-14 px-4">
        <!-- Tabs -->
        <div class="lg:hidden">
          <label for="selected-tab" class="sr-only">Select a tab</label>
          <select  
            @change="tab = $event.target.value"
            x-model="tab" 
            id="selected-tab" name="selected-tab" 
            class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md">
              <option value="merchant">Merchantz</option>
              <option value="psps">PSPs</option>
              <option value="payment_methods">Payment methods</option>
              <option>Billing</option>
              <option>Team Members</option>
          </select>
        </div>
    </div>
</div>

【讨论】：