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

by

2👍

✅

I should loop over the servers in a template and hide the row inside

<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>
👤andre de waard

1👍

If I’m understanding you, you want to make the same without tbody tag?
In this case, you can replace tbody with template tag, this tag won’t be rendered, it would be the same than make v-for and v-if at the same line.

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

1👍

Try to use the index to modify the corresponding item :

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

 }
👤Boussadjra Brahim

Leave a comment