How to hide button in vuejs and laravel

Question

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>

v-show="hidebutton" ... one would usually have a data or prop value that is Boolean ... one does not call a function that manipulates the DOM — Bravo
– Bravo, Commented Nov 22, 2019 at 8:26
Not in the question you want us to read and help you with :p — Bravo
– Bravo, Commented Nov 22, 2019 at 8:30
yeah Bravo you are right I will try next time I was a little bit in harry sorry for that — Basharmal
– Basharmal, Commented Nov 22, 2019 at 9:04

Ozan Batuhan Ceylan · Accepted Answer · 2019-11-22 08:35:23Z

2

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

answered Nov 22, 2019 at 8:35

Ozan Batuhan Ceylan

3723 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bravo Over a year ago

or use a calculated value instead saves you () on the v-show="hidebutton" :p

Ozan Batuhan Ceylan Over a year ago

You can use same method for v-if which is in p tag

Malith Pamuditha Fernando Over a year ago

Can someone help me for this question stackoverflow.com/questions/58990038/…

Effection · Accepted Answer · 2019-11-22 08:26:21Z

1

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.

answered Nov 22, 2019 at 8:26

Effection

1921 silver badge9 bronze badges

1 Comment

Bravo Over a year ago

it can be a function that returns a Boolean :p

Collectives™ on Stack Overflow

How to hide button in vuejs and laravel

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related