Событие изменения триггера после события щелчка в alpine.js

Question

В следующем примере при нажатии на элемент выбора и изменении значения значение textarea устанавливается на пустое.

У меня также есть кнопки, которые изменяют значение выбора, но это не вызывает событие изменения и не устанавливает значение textarea пустым.

<div x-data="{ select : 1, textarea : 'test' }">
    <div>
        <button x-on:click="select = 1">One</button>
        <button x-on:click="select = 2">Two</button>
        <button x-on:click="select = 3">Three</button>
    </div>

    <div>
        <select name="test" x-model="select" x-on:change="textarea = ''">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
    
    <textarea name="foobar" x-model="textarea">test</textarea>    
</div>

Я могу заставить это работать, обновляя события щелчка на каждой кнопке, как показано ниже.

<button x-on:click="select = 1; textarea = ''">One</button>

Есть ли способ вызвать событие изменения при выборе, независимо от того, запускается ли оно кнопкой или напрямую изменяет значение выбора?

Answer 1

x-model обновит значение, не вызывая события "изменение".

В вашем случае, я полагаю, вы хотите, чтобы select изменения, сбросьте значение textarea на ''".

Что вы можете сделать, используя x-init а также $watch('select', () => { textarea = '' }). В качестве бонуса вам не понадобитсяx-on:change="textarea = ''" на <select> больше нет.

Полный пример:

<div
  x-data="{ select : 1, textarea : 'test' }"
  x-init="$watch('select', () => { textarea = '' })"
>
    <div>
        <button x-on:click="select = 1">One</button>
        <button x-on:click="select = 2">Two</button>
        <button x-on:click="select = 3">Three</button>
    </div>

    <div>
        <select name="test" x-model="select">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
    
    <textarea name="foobar" x-model="textarea">test</textarea>    
</div>