Vue3组合式API：点击切换文本无法还原的解决方法

问题出在toggle函数仅单向设置文本值，未根据下拉框的显示/隐藏状态动态切换。只需修改toggle函数，根据isOpen的当前状态调整文本内容即可：

修改后的<script setup>代码：

<script setup>
const isOpen = ref(false)
const changeString = ref('Exibir Filtros')

function toggle() {
    isOpen.value = !isOpen.value
    // 根据下拉框的显示状态切换文本
    changeString.value = isOpen.value ? 'Ocultar Filtros' : 'Exibir Filtros'
}
</script>

模板部分无需改动，保持原有结构即可。

原理说明：

• 点击触发toggle时，先反转isOpen的布尔值，控制下拉框的显示/隐藏
• 再通过三元运算符判断isOpen的新值：
  • 若isOpen为true（下拉框显示），文本设为“Ocultar Filtros”
  • 若isOpen为false（下拉框隐藏），文本恢复为“Exibir Filtros”

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