在 HTML table (VUE3) 中使用 V-IF 和 V-FOR

Question

大家好，我目前正在为我的公司开发一个监控应用程序。所以我尝试在 table 中使用 V-if 和 V-for 我的代码如下所示：

   <tbody  v-for="server in servers" :key="server.Id">
      <tr v-if="server.Show == true">{{DATA}}</tr>

如果你点击左边的红眼，你可以隐藏一个服务器，但是它留下了它不应该做的事情。如果我调整 window 的大小，它会更正它。有没有更好的方法将我的数据放入 Tablebox，因为现在我正在为每个服务器创建一个新的 tablebody

我还是一名学生，对 VUE 还很陌生，所以我希望有人能给我解释为什么会这样。

编辑：拼写和更多信息

Answer 1

如果我理解你的话，你想在没有 tbody 标签的情况下制作同样的东西吗？这种情况下，可以把tbody换成template标签，这个标签不会被渲染，和make v-for和v-if在同一行是一样的。

<template  v-for="server in servers">
  <tr v-if="server.Show == true" :key="server.Id">{{DATA}}</tr>

Answer 2

尝试使用索引修改相应的条目：

 <tbody  v-for="(server,index) in servers" :key="server.Id">
      <tr v-if="server.Show == true">.....
        <img src="../assets/eye.png" @click="HideServer(server,index)" /></td>


  
HideServer(server,index) {
  this.servers[index]={...server,Show : false}

 }

Answer 3

我应该遍历模板中的服务器并隐藏其中的行

<tbody>
  <template v-for="(server, index) in servers">
      <tr :key="server.Id" v-if="server.Show">{{DATA}}</tr>
        <td>
          <img src="../assets/eye.png" @click="HideServer(server,index)" />
        </td>
      </tr>
   </template>
</tbody>

在 HTML table (VUE3) 中使用 V-IF 和 V-FOR

Use V-IF and V-FOR in a HTML table (VUE3)

vue.js

vue-component