AlpineJs change x-data according to select-CodePudding

I use

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

and need to change tab according to dropdown selection. how to do this with alpinejs? @click did not work

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

CodePudding user response：

You need to use x-model attribute to bind a variable to the select element.

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

The tab variable will receive the value of the selected option.