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

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

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.

 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 

, the visibility of the additional fields will toggle without removing them from the DOM. 

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

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

The element is always present in the DOM, but its visibility is toggled by changing its CSS 

  and the original display value (such as 

 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

The element is created and inserted into the DOM only if the condition evaluates to 

, 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 

 may be more performance-friendly, as it prevents unnecessary DOM manipulation until it is actually needed.

 for elements that need to be toggled quickly and often, and choose 

 for elements that are less frequently needed or that are expensive to render.

Dive into our programming articles for insights and tips. Covering a range of topics, they're perfect for learners at any level eager to expand their knowledge.

Dive into our programming articles for insights and tips.

Articles

Showing and hiding form elements in Vue.js

One of the most vital aspects of frontend development is state management. State management is the process of consistently persisting the status of variables or user interface controls such as buttons and text fields across multiple user interfaces or components. Simply put, what components need to know what, at what time. In  simple projects it is quite easy, but as the complexity of the application increases more components are involved and it becomes a pain in the ass, most cases as the complexity grows, developers resort to state management libraries like Pinia.

How to manage state in fairly simple proje

In a case where you want to manage state in a  simple project, the logical way would be to use props. That would mean passing a value from the parent component to its children and since Vue’s prop system follows a one-way data flow model where data flows from parent to child, the child component cannot directly modify a prop. It has to notify the parent about the changes using custom events.

 method is passed as a custom event listener (

), which will be triggered by the child component.

 method triggers the custom event by calling 

, informing the parent to increment the count. In this case the 

 is displayed in the template but is not modified directly by the child component. 

Quite simple, but for a case where you have multiple sibling components each with they own nested children it becomes complex.

Pinia is a state management library built specifically for Vue.js, it provides a flexible and intuitive way to manage state within Vue applications, offering a more streamlined alternative to Vuex. It is built on top of vue’s composition API which makes working with states more reactive.

To get started with Pinia we need to first of all install it by running this command in your project.

After installation we need to initialize and register Pinia in the main entry file( main.js or main.ts )

In Pinia, state is organized into stores that define it and the actions that can be performed on that state.

State is where you store your application’s reactive data in Pinia. It acts as a single source of truth for your components, holding all shared state that multiple components may need to access. Pinia automatically makes state reactive, meaning any changes to the state are immediately reflected in the components using it. 

Actions are functions defined in the store that allow you to modify the state or perform side effects such as making API request.

Getters are similar to computed properties in Vue.js. They allow you to derive or compute new state values based on the store’s existing state. Getters are cached and will only recompute when their dependencies change. Getters are reactive, meaning that if the state they depend on changes, the computed value automatically updates wherever it is used.

Converting our previous example using pinia

First, we need to create a Pinia store that manages the 

Next we need to convert the parent component to interact with the Pinia store instead of maintaining its own local state.

The child component can now directly interact with the store by accessing and modifying the shared state.

Pinia simplifies state management by creating a centralized state, a single point of truth,

This allows both the parent and child components to access and manipulate the same piece of state without needing to pass props or emit events. It also creates a shared store where both the parent and child components use the 

 function to access the store. They can directly read the 

 action. Pinia also ensures that any changes to the 

 value in the store are reactive. As a result, both components automatically update when the state changes.

State management in Vue.js using Pinia 

I have been writing server-side code for the last couple of years, over the last six months I decided to get out of my comfort zone and try frontend. Turns out frontend development involves a lot more than just styling your interface. A couple of researches down the line and a recommendation from a friend I decided to try Vue.js as my first frontend framework. I would say I loved it, and I still do! I built a couple of projects with it and I was cruising. A few of months into writing Vue a friend was working on a react project and I decided to hop in and have a feel of the most famous frontend framework! It would be easy, the main concepts are the same, reusable components and all, or so I thought! Turns out there is some considerable differences , here are some of the ways in which I feel Vue has the upper hand.

React and Vue.js have different concepts on how to respond to changes in data. Vue.js exposes APIs to leverage the reactive system that automatically tracks changes and dependencies then updates your UI. On the other hand, react does not have a built-in reactive system, it relies on developers to explicitly call state setters to trigger updates. It has APIs that help you manage state and it’s side effects. I find Vue’s reactivity easier and beginner friendly. To illustrate this difference let us use a simple counter example

Vue                                                                                                                   

 function creates a reactive state object. When 

 changes, Vue automatically updates the UI

 initializes the state and provides a setter function (

). You must explicitly call the setter when changing count or react will not trigger a rerender

Single file components vs Separating concerns

While React's separation of concerns approach is often praised for its modularity and maintainability, Vue.js' Single-File Components (SFCs) offer a compelling alternative for developers who prefer a more streamlined and cohesive development experience. I generally love Vue.js SFC components as opposed to React's separation of concern approach. SFC basically encapsulates all your relevant code (HTML, CSS, and JavaScript) into one file, while separation of concern in React divides separate aspects of the application into their distinct files, in this particular case the CSS file. The growing complexity of separate CSS files can indeed become a challenge. SFCs can alleviate this burden by allowing you to manage your styling directly within the component's context, potentially reducing the need for extensive CSS management outside of the component itself.

In Vue.js conditional rendering is typically done through directives that dynamically render elements based on a condition while in react it is done using basic javascript expressions and statements. I find Vue.js’ declarative syntax easy to work with because it lets you define your condition easily in your mark up.

Just like conditional rendering, Vue.js iteration is done using directives, this allows you to loop over arrays and objects while in react it is done using javascript inbuilt map method. I particularly prefer Vue because reactivity automatically updates changes on the data while react updates on state change.

The biggest challenge I faced when I started frontend development was state management, I first started with Vuex before shifting to a lightweight alternative Pinia. Pinia, a state management library built for vue, provides a simple and intuitive API built on top of Vue.js composition API. It feels less verbose compared to redux that has more boiler plate code due to the need for actions and reducers, which can be hectic for newcomers.

Using the Pinia store in a Vue component:

Using the Redux store in a React component

There is a steeper learning curve when you switch from writing vue.js to writing react, even though both use component based architecture the way in which components are structured and managed differs. Vue.js has a better developer experience and it is easy to learn for beginners, on the other hand the flexibility of react in terms of choosing libraries and tools can lead to decision fatigue. In terms of project requirements, react would be a more suitable choice for complex and larger projects that require total control over performance and scalability. Finally I have learnt that switching frameworks can be an opportunity for professional growth.

vue Articles

Showing and hiding form elements in Vue.js

State management in Vue.js using Pinia

Ways in which I feel Vue.js edges React

Practice Frontend, Android and iOS by building real world projects.