Vue JS 根据传递给函数的参数更改要编辑的变量

Question

嗨，JS（和普通）新手，

我目前正在尝试使用 Vue JS 制作简单的网页，该网页具有可点击的内容，这会导致该部分扩展以显示更多内容。

我使用布尔变量“expanded”来完成此操作，该变量可通过单击进行切换。

<q-card @click="expand_header()">
<div v-show="expanded">

export default {
  setup() {
    return {
      expanded: ref(false),
    };
  },
}

expand_header: function () {

      this.expanded = !this.expanded;

    },

但是，因为我试图将此功能添加到多个框中，所以我想抽象此功能并在调用该函数时传递一个参数，该参数将编辑相应的变量，我想知道正确的语法是什么。

新手直觉告诉我将一个数字参数传递到函数中，该函数将编辑类似的变量之一，如下所示：

@click="expand_header(1)"

@click="expand_header(2)"

<div v-show="expanded1">content<div>

<div v-show="expanded2">content<div>

export default {
  setup() {
    return {
      expanded1: ref(false),
      expanded2: ref(false),
    };
  },
}

expand_header: function (num) {

      this.expanded[num] = !this.expanded[num];

    },

左右：

expand_header: function (num) {

      this.expanded + num = !this.expanded + num;

    },

但这显然不是正确的语法。

我不确定在哪里可以找到此类问题的 JS 语法文档或指南，因此任何输入或文档推荐将不胜感激！

Answer 1

只需为这样的卡片创建一个组件（为内容使用一个插槽（您可以为标题添加一个命名插槽）：

游乐场

<script>
import {ref} from 'vue';
export default{
  props:{
    title: String
  },
  setup(){
    return {
      expanded: ref(false)
    }
  }
}
</script>

<template>
  <div class="q-card" @click="expanded = !expanded">
    {{ title }}
  </div>
  <div v-if="expanded" class="content">
    <slot />
  </div>
</template>

用途：

<script>
  import Section from './Section.vue';
  export default {
    components: {Section},
    setup() {
      return {
        components: {Section},
      };
    },
  }
</script>

<template>
  <Section title="Section 1">
    Section 1 content
  </Section>
  <Section title="Section 2">
    Section 2 content
  </Section>
</template>