Snippet

Conditionally Displaying Badge Text with Switch and Primitive Types

In UI components, branching logic based on primitive string values is common for formatting human-readable badges. Utilizing a switch statement inside a computed property provides clear control flow, explicit fallbacks for unrecognized states, and optimal reactivity tracking.

snippet.js

javascript

import { ref, computed } from 'vue';
 
const orderStatus = ref('in_transit');
 
const statusLabel = computed(() => {
  switch (orderStatus.value) {
    case 'pending':
      return 'Order Placed';
    case 'in_transit':
      return 'Out for Delivery';
    case 'delivered':
      return 'Completed';
    default:
      return 'Unknown Status';
  }
});

vue

Breakdown

const orderStatus = ref('in_transit');

Initializes a reactive reference holding a primitive string representing the current state.

const statusLabel = computed(() => {

Defines a reactive computed getter that automatically recalculates whenever orderStatus changes.

switch (orderStatus.value) {

Evaluates the primitive string value of orderStatus against predefined cases.

case 'pending': return 'Order Placed';

Matches the 'pending' string identifier and returns the corresponding label.

case 'in_transit': return 'Out for Delivery';

Matches the active delivery state and returns the descriptive text.

default: return 'Unknown Status';

Provides a safe fallback string when the status does not match any expected case.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Conditionally Displaying Badge Text with Switch and Primitive Types

Related