带有加载图标的Alpine.js加载按钮

Question

我有一个这样的按钮。当有人点击它时，它会被禁用，而文本从登录到请等待.

<button 
    id="import_btn" 
    class="btn btn-primary btn-login w-100 mb-2" 
    type="submit" 
    x-data="{loading:false}" 
    x-on:click="loading=true; document.getElementById('form').submit();"
    x-text="loading ? 'Please Wait ...' : 'Login'" class="disabled:opacity-50" 
    x-bind:disabled="loading">
    <i class="uil uil-sign-in-alt"></i> Login
</button>

我用Alpine.js做的，效果很好。现在我想添加一个像(<i class="uil uil-loding"></i>)这样的加载图标，请等待.文本。我如何在Alpine.js中做到这一点？

Answer 1

在您的示例中，当click事件触发时，它将覆盖按钮元素中包含的图标元素。可以使用button将文本和图标元素注入到按钮中，而不是x-text。请注意后面的内容，以便您可以同时使用单引号和双引号来表示x表达式。

试试这个：

<button 
    id="import_btn" 
    class="btn btn-primary btn-login w-100 mb-2" 
    type="submit" 
    x-data="{loading:false}"
    x-on:click="loading=true; document.getElementById('form').submit();"
    x-html="loading ? `<i class='uil uil-loding uil-sign-in-alt'></i> Please Wait ...` : 'Login'" class="disabled:opacity-50" 
    x-bind:disabled="loading">
    Login
</button>