AlpineJs 根据 select 更改 x-data

Question

我用

x-data="{tab: 'option1'}"

并且需要根据下拉选择更改选项卡。如何用 alpinejs 做到这一点？ @click 无效

 <select>
      <option @click="tab = 'tab1'">{{ __('option1') }}</option>
      <option @click="tab = 'tab2'">{{ __('option2') }}</option>
 </select>

Answer 1

您需要使用 x-model 属性将变量绑定到 select 元素。

<div x-data="{tab: 'option1'}">
  <select x-model="tab">
    <option value="option1">{{ __('option1') }}</option>
    <option value="option2">{{ __('option2') }}</option>
  </select>
</div>

tab 变量将接收 selected 选项的值。

AlpineJs 根据 select 更改 x-data

AlpineJs change x-data according to select

laravel

alpine.js