Vue.js3 Toggle v-show on checkbox/toggle click，如何使 v-show 在每次点击时反应

Question

<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>

隐藏值在渲染时起作用，不显示 div 中的复选框和输入。单击“隐藏”值确实会发生变化，但 v-show 不会发生变化。 这怎么设置不正确？

Answer 1

您可以使用 ref 使您的变量具有反应性：

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

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