Nuxt/Vue 展开收起文本组件无法正常工作问题排查

问题场景 #

我创建了一个基于Tailwind的hidden类和绑定的more变量的简易展开收起文本组件，组件代码如下：

<!--  More.vue -->
<template>
  <section :class="{ hidden: more }">
    <slot /><!-- long content will be inside -->
    <p class="cursor-pointer" @click="toggle"> less </p>
  </section>
  <p :class="{ hidden: !more }" class="cursor-pointer" @click="toggle"> more </p>
</template>

<script setup>
let more = ref(true);

function toggle() {
    more = !more;
    console.log(more); // true, false - as expected
}
</script>

组件使用方式：

<template>
    Always visible content.
    <More>Some long content with toggled visibility.</More>
</template>

测试时控制台输出符合预期，但展开的内容部分始终不显示，请问问题出在哪里？

问题原因与修复方案 #

• 响应式变量赋值错误
  Vue中ref创建的响应式变量必须通过.value属性修改值，直接执行more = !more会打破变量的响应式关联——虽然控制台打印的数值看起来正常，但组件视图并不会感知到状态变化，因此内容的显示/隐藏状态始终不会切换。

修复后的toggle函数：

function toggle() {
    more.value = !more.value;
    console.log(more.value);
}

• Class绑定优先级优化（可选）
  第二个<p>标签同时混用了静态class和动态:class，虽然当前逻辑不会出错，但为了避免潜在的样式优先级冲突，建议用数组语法合并class：

<p :class="['cursor-pointer', { hidden: !more }]" @click="toggle"> more </p>

修正后的完整组件代码 #

<!--  More.vue -->
<template>
  <section :class="{ hidden: more }">
    <slot /><!-- long content will be inside -->
    <p class="cursor-pointer" @click="toggle"> less </p>
  </section>
  <p :class="['cursor-pointer', { hidden: !more }]" @click="toggle"> more </p>
</template>

<script setup>
import { ref } from 'vue';
let more = ref(true);

function toggle() {
    more.value = !more.value;
    console.log(more.value);
}
</script>

内容的提问来源于stack exchange，提问作者Александр Ермолин