Vue.js3 Toggle v-show on checkbox/toggle click, how to make v-show reactive on each click-CodePudding

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

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

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

</script>

The hidden value works at render and does not show the checkbox and input in the div. On clicking the the "hidden" value does change, but the v-show does not change. How is this set up incorrectly?

CodePudding user response：

You can make your variable reactive with ref :

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

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