如何将禁用提交按钮从 jQuery 转换为 alpinejs？

Question

我想知道如何将禁用提交按钮从jQuery转换为alpine js？

代码 ：

<form>
  <input type="text" class="input-field" placeholder="Enter you name *" value="" />
  <button type="submit" class="submit-btn">Submit</button>
</form>

$(document).ready(function(){
    $('.submit-btn').attr('disabled',true);
    $('.input-field').keyup(function(){
        if($(this).val().length !=0)
            $('.submit-btn').attr('disabled', false);            
        else
            $('.submit-btn').attr('disabled',true);
    })
});

Answer 1

使用x-bind或其较短的语法，:

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

<form x-data="{ name: ''}">
  <input type="text" x-model="name" placeholder="Enter you name *" />
  <button type="submit" :disabled="!name.length">Submit</button>
</form>