高山js -为什么x-数据变量“未定义”？

Question

我试图在下拉列表的更改事件上更新x-data 'tab‘选项卡，使用选择选项中的值，但变量是“未定义的”。

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

Answer 1

我通过在select标记中添加x-model="tab“来修复这个问题，这要归功于 https://stackoverflow.com/a/63156115/4167547。

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