Vue JS中如何根据函数参数修改待编辑变量？

你之前的问题在于用单独的expanded1、expanded2变量管理状态，然后尝试用错误的语法去动态访问这些变量。下面给你几种更合理的实现方式：

方法1：用数组统一管理展开状态 #

适合面板数量固定、按顺序排列的场景：

export default {
  setup() {
    // 数组长度对应面板数量，初始值全为false（折叠状态）
    const expanded = ref([false, false]);

    const expandHeader = (num) => {
      // 注意数组索引从0开始，如果你传的是1、2这类序号，要减1
      expanded.value[num - 1] = !expanded.value[num - 1];
    };

    return {
      expanded,
      expandHeader
    };
  }
}

模板写法：

<q-card @click="expandHeader(1)">
  <div v-show="expanded[0]">面板1内容</div>
</q-card>

<q-card @click="expandHeader(2)">
  <div v-show="expanded[1]">面板2内容</div>
</q-card>

方法2：用对象管理带标识的展开状态 #

适合面板有自定义标识（比如ID、名称）的场景，可读性更强：

export default {
  setup() {
    const expanded = reactive({
      panelA: false,
      panelB: false
    });

    const expandHeader = (panelKey) => {
      expanded[panelKey] = !expanded[panelKey];
    };

    return {
      expanded,
      expandHeader
    };
  }
}

模板写法：

<q-card @click="expandHeader('panelA')">
  <div v-show="expanded.panelA">面板A内容</div>
</q-card>

<q-card @click="expandHeader('panelB')">
  <div v-show="expanded.panelB">面板B内容</div>
</q-card>

方法3：结合v-for动态渲染面板（最推荐） #

如果面板数量不确定或者需要动态新增，直接把展开状态和面板数据绑定在一起，不用单独维护状态变量：

export default {
  setup() {
    // 面板数据和展开状态放在一起
    const panels = ref([
      { id: 'user', title: '用户信息', content: '这里是用户详情', expanded: false },
      { id: 'order', title: '订单记录', content: '这里是订单列表', expanded: false }
    ]);

    const expandHeader = (panel) => {
      panel.expanded = !panel.expanded;
    };

    return {
      panels,
      expandHeader
    };
  }
}

模板写法：

<q-card v-for="panel in panels" :key="panel.id" @click="expandHeader(panel)">
  <h3>{{ panel.title }}</h3>
  <div v-show="panel.expanded">{{ panel.content }}</div>
</q-card>

解释你之前的错误写法 #

• this.expanded[num]：你没有定义expanded数组，只有expanded1、expanded2单独变量，所以这个写法找不到对应属性
• this.expanded + num = ...：这是语法错误，不能把表达式作为变量名进行赋值操作。如果非要用单独变量的方式（不推荐），正确的写法是this[expanded${num}].value = !this[expanded${num}].value，但这种方式代码冗余且不易维护。

学习建议 #

• 先掌握Vue3的响应式基础：理解ref（用于基本类型）和reactive（用于对象/数组）的区别，以及如何正确更新它们的值
• 多使用v-for结合数据驱动的方式渲染组件，减少重复代码

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