javascript - 如何在vuejs和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 函数，如下所示，该函数将返回一个 bool 值，以便 vue 可以使用 v-show 属性处理显示/隐藏状态。

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