Alpine JS 根据 select 选项更改标签/文本框值

Question

是否可以根据 AlpineJS 中的 select 选项更改标签和文本字段值？

在页面加载时，我希望 select 选项为 local，下面的标签为 'Define'，文本框值为 'define here'，但是如果有人选择 remote，则标签为 'Remote Define'，文本字段值为 'remote define here'。

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>

Answer 1

使用 Alpine.js，您可以使用 x-model 双向绑定 input/select（双向绑定，因为组件 state/JS 中的值更新将更新 input/select 并且对 input/select 的更改将更新 JS 中的组件 state/value）。您可以使用 x-model 来处理 location 值更新。请注意，您需要一个带有 x-data 的包装元素。

Alpine.js 还提供了一种设置文本 (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>

Alpine JS 根据 select 选项更改标签/文本框值

Alpine JS change label / textbox value based on select option

javascript

alpine.js