Блог

Возможно ли изменить значение метки и текстового поля на основе опции выбора в AlpineJS?

При загрузке страницы я бы хотел, чтобы опция выбора была local , а надпись ниже была «Определить», а значение текстового поля было «определить здесь», но если кто-то выберет remote , то метка будет читать «Удаленное определение», а значение текстового поля будет «удаленное определение здесь».

Возможно ли это с AlpineJS? У меня есть следующий код;

 <div>
    <label for="location">Location</label>
    <div>
        <select id="location">
            <option value="local">Local</option>
            <option value="remote">Remote</option>
        </select>
    </div>
</div>

<div>
    <label for="define">Define</label>
    <input id="define" type="text" autocomplete="off">
</div>
 

С Alpine.js вы можете использовать x-model для 2-полосной привязки ввода / выбора (2-полосная, потому что обновление значения в состоянии компонента / JS обновит ввод / выбор, а изменение ввода / выбора обновит состояние / значение компонента в JS). Вы можете использовать x-model для обработки location обновлений значений. Обратите внимание, что вам нужен завершающий элемент с x-data на нем.

Alpine.js также предоставляет способ установки text ( x-text ) и привязки к произвольным атрибутам x-bind , в вашем случае вы хотите установить значение заполнителя таким x-bind:placeholder образом.

Полностью:

 <form x-data="{ location: 'local' }">
<div>
    <label for="location">Location</label>
    <div>
        <select id="location" x-model="location">
            <option value="local">Local</option>
            <option value="remote">Remote</option>
        </select>
    </div>
</div>

<div>
    <label for="define" x-text="location === 'local' ? 'Define' : 'Remote Define'"></label>
    <input id="define" type="text" autocomplete="off" x-bind:placeholder="location === 'local' ? 'define here' : 'remote define here">
</div>
</form>