CODEWITHSUNDEEP
javascriptlaravelvue.js
Basharmal
Basharmal

Reputation: 1384

How to hide button in vuejs and laravel

I am trying to hide the button if there is no data in the table I have no Idea how to do it because I am new in vuejs. any help would be highly appreciated. if there is any other way to do it please let me know.

HTML Code in Employee.vue is :

<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>

javascript function in Employee.vue is :

<script>
       hidebutton() {
        document.getElementById("btndel").style.visibility = "hidden";
        },
</script>

Upvotes: 0

Views: 1100

Answers (2)

Ozan Batuhan Ceylan
Ozan Batuhan Ceylan

Reputation: 372

If you change the hidebutton function like below the function returns a boolean value so you vue can handle the show/hide state with v-show property.

hidebutton() {
    return employees.data!==undefined || employees.data !== '' || employees.data !== null;
}

Upvotes: 2

Effection
Effection

Reputation: 192

The v-show value "hidebutton" must be also declared in the data-property of your Vue instance. If it has the value "false" the button will be hidden and viceversa. You can set "hidebutton" dynamically.

Upvotes: 1

Related Questions