How can we make v-show reactive with each click of a checkbox or toggle in Vue.js 3?

<template>
  <ToggleSwitch class="right "  @onChange.preventDefault="onChange" ></ToggleSwitch>
                        
  <div v-show="!hidden">
    <CheckBox v-if="typeof cellProps.rowData.BrandTypeId === 'boolean'" 
              class="right space" />
    <Input v-if="typeof cellProps.rowData.BrandTypeId != 'boolean'"
           class="right space"
           label="Change Colors" />
  </div>
</template>

<script lang="ts" setup>
    let hidden = true

    const onChange = () => {
        console.log("toggle successful", hidden)
        hidden = !hidden; 
    }
</script>

At the time of rendering, the hidden value controls the visibility of checkbox and input within the div. However, even though clicking on the toggle button successfully changes the hidden value, the visibility based on v-show does not update as intended. What could be causing this setup to behave incorrectly?

Answer №1

To create a reactive variable in Vue, you can use the ref function:

import { ref } from "vue'
let isVisible = ref(true)

const toggleVisibility = () => {
    console.log("Toggling visibility", isVisible)
    isVisible.value = !isVisible.value; 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A controller in Angular.js that leverages several different services

I'm having trouble injecting multiple services into a controller. Here are my listed files: index.html file: <script src="'./angular/angular.min.js'></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta ...

CSS - starting fresh with animations

I am facing an issue with a CSS animation that I created. Everything seems to be working correctly, but I need to complete it by setting the input type to reset the animation. Below is the CSS code snippet that should reset the animation: $('button& ...

Connecting event listeners to offspring elements, the main element, and the entire document

My request is as follows: I have multiple boxes displayed on a webpage, each containing clickable divs and text. When a user clicks on a clickable div, an alert should appear confirming the click. Clicking on the text itself should not trigger any action. ...

Utilize ReactJS, Axios, and PHP to fetch the latest information from the database

I am facing an issue where the data on my page does not update when I make changes to the database. The initial data is rendered correctly, but any subsequent changes are not reflected on the page even after calling the update function. The PHP function o ...

What is the best way to trigger a function when a button is enabled in Angular 8?

Here is a portion of my sign-in.component.html file. I have created a function in the corresponding sign-in.component.ts file that I want to trigger when the button below becomes enabled. Here is an example of what I am trying to achieve: <div class= ...

Tips for preventing the use of eval when invoking various functions

Here's a snippet of code I've been using that involves the use of eval. I opted for this approach as it seemed like the most straightforward way to trigger various factory functions, each responsible for different web service calls. I'm awa ...

Pagination issue in DRF and VueJS resulting in incorrect number of pages displayed

I've been experimenting with implementing pagination using DRF for the backend and VueJs for the frontend. Despite setting up the PageNumberPagination in my settings.py, I'm only able to display the first page number. In my articles viewset: cla ...

Incorporate additional plugins into React-Leaflet for enhanced functionality

I'm currently working on developing a custom component using react-leaflet v2, where I aim to extend a leaflet plugin known as EdgeMarker. Unfortunately, the documentation provided lacks sufficient details on how to accomplish this task. In response, ...

Issue with Angular-cli: typescript files not being generated when using the --dev option

Currently using angular-cli version 1.0.0-beta.14 with node version 6.6.0 on a Windows 32 bit x64 operating system. This setup utilizes the webpack version of angular-cli and I can successfully use ng build to compile. The output of ng build indicates that ...

How can one effectively overcome the constraint in HTML5 canvas that prevents altering the positions of previously sketched elements?

I am currently working on creating a wind map that displays data from seven different weather stations. My goal is to develop a fluid and interactive map similar to the ones found in this animation or this animation. In my research, I came across an artic ...

Saving an array of key-value pairs in local storage

I'm attempting to save an array in local storage using the following code: var tempval = []; tempval['key'] = 1; localStorage.setItem("Message", JSON.stringify(tempval)); However, when I check local storage, it only sho ...

Steps to configure caching settings to ensure no caching for the entire site during specific hours, and constant no-cache policy for a particular page

Managing cache for my website has become quite the challenge. Some pages need to be cached during certain hours to improve navigation speed, while others must not be cached during crucial data update times. And to add to the complexity, there are pages tha ...

Selecting multiple elements with the same attribute value using jQuery

I am looking to target specific DOM elements using jQuery. Below is the HTML code: <li> <span class="node> <span class="con"></span> <span class="check"></span> <img> <a title="high">abc&l ...

Testing event emitters in node.js: a step-by-step guide

Imagine the scenario where I need to create a basic task. However, I also need to develop a test that validates the following criteria: The task should emit an object. The emitted object must have a property named "name". I am utilizing mocha and chai e ...

Arrange the child elements of a div to be displayed on top of one another in an HTML document

I am struggling with a div containing code .popupClass { width: 632px; height: 210px; position: absolute; bottom:0; margin-bottom: 60px; } <div class="popupClass"> <div style="margin-left: 90px; width: 184px; hei ...

The issue with Jquery .html() function causing spaces to disappear between words

When utilizing jQuery's .html() property to populate a select box, I encountered an issue where the spaces between words were being trimmed down to just one space. Despite including multiple spaces in the option, it would always resolve to a single sp ...

Leverage the power of Laravel and Vue Sanctum to implement authorization in your application

Currently, I am working on a laravel + vue project and implementing sanctum for authentication purposes. However, in addition to authentication, I also need authorization functionality in my project. I have been searching for a solution similar to (spate l ...

Syntax for the expression used in the ng-click directive

I have two variables named wkidx and dyidx. My goal is to create multiple collapsible elements on the same page using the angular ui bootstrap directive. I am currently facing an issue with the following code snippet: <a href="" class="" ...

Dynamic Search Functionality using Ajax and JavaScript

function fetchData(str) { if (str.length == 0) { var target = document.querySelectorAll("#delete"); return; } else { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && ...

Angular utilizing external parameter for Ajax requests

As a newcomer to Angular, I am eager to upgrade some old jQuery code with AngularJS. The task at hand is to extract a string from a span element, split it into two separate strings, and then use these as parameters in a GET request. I am dedicated to lea ...