当输入在页面加载或用户更改时有值时更新 Alpinejs x-data

Question

我有点失落。如果文本输入有值，无论是在页面加载时（如果输入已预填充）还是在用户输入值时，我都需要向标签添加一个类。如果用户从输入中删除文本，我需要删除这些类。

.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

我们可以使用x-model属性 fromalpinejs将输入文本绑定到 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如果字段中有一些输入，则应该添加类。