AlpineJs 根据选择更改 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 属性将变量绑定到选择元素。

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

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