I am struggling to figure out how to hide the button when there is no data in the table in my Vue.js project. Since I am new to Vue.js, I would really appreciate any help or guidance on how to achieve this. If there is another way to accomplish this, please share your suggestions with me.
Here is the HTML code in Employee.vue:
<div class="col-md-2" style="margin-bottom:-29px;">
<button class="btn btn-danger" @click="delt" v-show="hidebutton">
<i class="fas fa-user-minus"></i>
Delete Multiple
</button>
</div>
<table class="table table-hover">
<thead>
</thead>
<tbody>
<tr>
<td colspan="16" align="center">
<p v-if="employees.data!=undefined && employees.data.length == 0 || employees.data!=undefined && employees.data.length=='' "
class="text-center alert alert-danger">There is no data in the Table
<!--how to call the hidebutton() function inside the p tag-->
</p>
</td>
</tr>
</tbody>
</table>
And here is the JavaScript function in Employee.vue:
<script>
hidebutton() {
document.getElementById("btndel").style.visibility = "hidden";
},
</script>