Vue中使用v-if指令后对应Div元素不显示该如何解决？

问题诱因 #

• 核心原因是你没有正确修改Vue的响应式变量，和是否在组件外部修改无关，只要操作规范，外部修改响应式变量也可以正常触发视图更新。
• 第一，你给AvatarControl函数传递的是settingsToggled的值副本，不是响应式对象本身。如果settingsToggled是你在setup里用ref定义的响应式变量，直接传变量名的话，函数内拿到的是解包后的普通布尔值，属于基础数据类型，赋值操作只会修改当前函数内的局部变量，完全不会影响组件内的原响应式变量，自然不会触发视图更新。
• 第二，就算你传递的是完整的ref对象，直接修改变量本身的写法也不符合规范，必须修改ref对象的.value属性才会触发响应式更新。
• 额外注意你代码中存在笔误：controlUI.innterHTML拼写错误，正确写法为innerHTML。

修复方案 #

1. 调用AvatarControl时传递完整的ref对象，不要直接传解包后的值：

// setup内调用示例
const settingsToggled = ref(false)
// 直接传递ref对象本身，不要写settingsToggled.value
AvatarControl(controlDiv参数, settingsToggled)

2. 修改AvatarControl内的赋值逻辑，操作ref对象的.value属性：

controlUI.addEventListener("click", () => {
  console.log(settingsToggled.value)
  settingsToggled.value = !settingsToggled.value
})

内容的提问来源于stack exchange，提问作者Dave