Snippet

Toggling Boolean Visibility Flags

Controlling UI state such as modals or accordions relies heavily on boolean primitive values stored in Vue refs. Using the logical NOT operator `!` provides a straightforward toggle mechanism, while explicit assignment functions enforce deterministic states.

snippet.js

javascript

import { ref } from 'vue';
 
const isModalVisible = ref(false);
 
function toggleModal() {
  isModalVisible.value = !isModalVisible.value;
}
 
function closeModal() {
  isModalVisible.value = false;
}

vue

Breakdown

const isModalVisible = ref(false);

Declares a boolean reactive state initialized to false.

isModalVisible.value = !isModalVisible.value;

Inverts the current boolean value to flip between visible and hidden states.

isModalVisible.value = false;

Explicitly sets the boolean flag to false to guarantee modal closure.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Toggling Boolean Visibility Flags

Related