<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script> <button class="alert alert-danger" @click="getUsers">Alert</button> <div x-model="users()" x-init="getUsers" class="col-md-12 bg-info p-5 m-0 row"> dd <div x-for="user in list" class="col-md-3 card"> <!-- Card body --> <template class="card-body"> <div class="row align-items-center"> <div class="col-auto"> <!-- Avatar --> <a href="#" class="avatar avatar-xl rounded-circle"> <img alt="Image placeholder" src="../../assets/img/theme/team-2.jpg"> </a> </div> <div class="col ml--2"> <h4 class="mb-0"> <a href="#!" x-text="user.name"></a> </h4> <p class="text-sm text-muted mb-0" x-text="user.email">Working remoteley</p> </div> <div class="col-auto"> <button type="button" class="btn btn-sm btn-primary">Add</button> </div> </div> </template> </div> </div>

function users() { return { list: null, getUsers() { alert("hello"); } } }