Showing and hiding Vue content

Along with v-if for showing and hiding content, you can also use the v-show="" directive. v-show is very similar to v-if; they both get added to the HTML wrapper and can both accept the same parameters, including a function.

The difference between the two is v-if alters the markup, removing and adding HTML elements as required, whereas v-show renders the element regardless, hiding and showing the element with inline CSS styles. v-if is much more suited to runtime renders or infrequent user interactivities as it could potentially be restructuring the whole page. v-show is favorable when lots of elements are quickly coming in and out of view, for example, when filtering!

When using v-show with a method, the function needs to return just a true or false. The function has no concept of where it is being used, so we need to pass in the current person being rendered to calculate if it should be shown.

Create a method on your Vue instance titled filterRow() and inside, set it to return true:

      filterRow(person) {
         return true;
      }

The function takes one parameter, which is the person will we pass in from though from the HTML. In your view, add the v-show attribute to the <tr> element with filterRow as the value while passing in the person object:

      <table>
        <tr v-for="person in people" v-show="filterRow(person)">
          <td>{{ person.name }}</td>
          ...

As a simple test, return the isActive value to the person. This should instantly filter out anyone who is inactive, as their value will return false:

      filterRow(person) {
        return person.isActive;
      }