Alpine js - 为什么 x-data 变量“未定义”
2021-12-21
2778
我尝试在下拉菜单的更改事件中更新 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>
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>
Justin
2021-12-21