如何在Vue.js和Laravel中隐藏按钮

Question

如果表中没有数据，我想隐藏该按钮，但我不知道该怎么做，因为我是vuejs的新手。任何帮助将不胜感激。 如果还有其他方法可以解决，请告诉我。

Employee.vue中的HTML代码为：

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

Employee.vue中的

javascript函数是：

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

Answer 1

如果像下面那样更改hidebutton函数，该函数将返回一个布尔值，因此vue可以使用v-show属性处理显示/隐藏状态。

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

Answer 2

还必须在Vue实例的数据属性中声明v-show值“ hidebutton”。 如果其值为“ false”，则该按钮将被隐藏，反之亦然。 您可以动态设置“隐藏按钮”。