当输入在页面加载或用户更改时具有值时更新 Alpinejs x 数据

Question

我有点迷路了。如果文本输入有值，我需要在标签中添加一个 class ，无论是在页面加载时（如果输入是预填充的）还是当用户输入一个值时。如果用户从输入中删除文本，我需要删除那些 classes。

.has-value {color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script>

<form x-data='{value:false}'>
  <label for='example' :class='{"has-value": value }'>Label </label>
  <input id='example' name='example' type='text' x-on:change='value = true' />
</form>

Answer 1

我们可以使用 alpinejs 中的 x-model 属性将输入文本绑定到 alpine 组件属性。现在我们可以通过检查输入的长度来检查输入是否有值。


<form x-data='{value: ""}'>
    <label for='example' :class='{"has-value": value.length > 0 }'>Label </label>
    <input id='example' name='example' type='text' x-model="value" />
</form>

如果你想为输入设置一个初始值，你可以在alpinejs组件中进行，如下所示


<form x-data='{value: "initial-value"}'>
    <label for='example' :class='{"has-value": value.length > 0 }'>Label </label>
    <input id='example' name='example' type='text' x-model="value" />
</form>

请注意，我使用了 value.length > 0，因为如果字段中有一些输入，则应添加 has-value class。

当输入在页面加载或用户更改时具有值时更新 Alpinejs x 数据

Update Alpinejs x-data when input has a value on page load or user change

javascript

tailwind-css

alpine.js