Showing and hiding form elements in Vue.js

Since v-show doesn’t add or remove elements from the DOM, it is more efficient when you need to toggle visibility frequently, such as showing and hiding small UI components

November 5, 20243 min read

Introduction

When working with forms in Vuejs we can hide and display form elements using conditional rendering with directives.

We are going to use directives to show or hide form elements, in the provided examples we will use a single file component for ease of use. We’ll create a form that includes various input fields and use checkboxes to control the visibility of certain elements

Creating the form elements

First, let’s set up our basic form structure. We’ll include a checkbox that, when checked, will reveal additional input fields.

<template>
  <div>
    <h1>Dynamic Form Example</h1>
    <form>
      <label>
        <input type="checkbox" v-model="showDetails" />
        Show additional details
      </label>

      <!-- Additional form elements will go here -->
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDetails: false // This controls the visibility of additional details
    };
  }
};
</script>

Try Kodaschool for free

Click below to sign up and get access to free web, android and iOs challenges.

Binding Form Elements

Next, we will bind our form elements to the data properties in our Vue component. This allows us to easily track user input and control visibility based on the checkbox state.

We will add input fields that will only be displayed when the checkbox is checked.

<template>
  <div>
    <h1>Dynamic Form Example</h1>
    <form>
      <label>
        <input type="checkbox" v-model="showDetails" />
        Show additional details
      </label>

      <div v-if="showDetails">
        <label for="address">Address:</label>
        <input type="text" id="address" v-model="address" />

        <label for="phone">Phone Number:</label>
        <input type="tel" id="phone" v-model="phone" />
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDetails: false,
      address: '',
      phone: ''
    };
  }
};
</script>

Show / Hide Elements Based on Checkbox

The <div> containing the address and phone number input fields will only be rendered in the DOM if the checkbox is checked, and this is made possible using the v-if directive.

If you prefer to use the v-show directive instead of v-if, the visibility of the additional fields will toggle without removing them from the DOM.

<template>
  <div>
    <h1>Dynamic Form Example</h1>
    <form>
      <label>
        <input type="checkbox" v-model="showDetails" />
        Show additional details
      </label>

      <div v-show="showDetails">
        <label for="address">Address:</label>
        <input type="text" id="address" v-model="address" />

        <label for="phone">Phone Number:</label>
        <input type="tel" id="phone" v-model="phone" />
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDetails: false,
      address: '',
      phone: ''
    };
  }
};
</script>

Putting It All Together

After we have implemented both showing and hiding elements based on a checkbox, we can enhance our form further.

<template>
  <div>
    <h1>Dynamic Form Example</h1>
    <form @submit.prevent="handleSubmit">
      <label>
        <input type="checkbox" v-model="showDetails" />
        Show additional details
      </label>

      <div v-if="showDetails">
        <label for="address">Address:</label>
        <input type="text" id="address" v-model="address" />

        <label for="phone">Phone Number:</label>
        <input type="tel" id="phone" v-model="phone" />
      </div>

      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDetails: false,
      address: '',
      phone: ''
    };
  },
  methods: {
    handleSubmit() {
      console.log('Form submitted:', {
        address: this.address,
        phone: this.phone
      });
      // Further processing like validation or API calls can be added here
    }
  }
};
</script>

How v-show differs from v-if

Both are used in controlling the visibility of elements in Vue.js, but they work in different ways.

`v-show`

The element is always present in the DOM, but its visibility is toggled by changing its CSS display property between none and the original display value (such as block, inline, etc.).
Since v-show doesn’t add or remove elements from the DOM, it is more efficient when you need to toggle visibility frequently, such as showing and hiding small UI components (like dropdowns or modals) based on user interactions

<div v-show="isVisible">
  This element is always in the DOM, but its visibility is toggled.
</div>

`v-if`

The element is created and inserted into the DOM only if the condition evaluates to true. When the condition is false, the element is completely removed from the DOM, which includes the associated event listeners and child components.
If the element is rarely used or has complex rendering logic, using v-if may be more performance-friendly, as it prevents unnecessary DOM manipulation until it is actually needed.

<div v-if="isVisible">
  This element is created in the DOM only when the condition is true.
</div>

In most cases, choose v-show for elements that need to be toggled quickly and often, and choose v-if for elements that are less frequently needed or that are expensive to render.

Hope this was helpful.
Peace!