为什么当单击一个项目时，所有项目都打开

debugcn 发表于 Dev

亚力山大

我有一个带有手风琴的列表，当您单击一个项目时，所有项目都将打开，我只需要打开一个项目，我知道需要循环访问所有项目并将类应用于特定的项目，但是如何为此，请帮助
组件：

  <ul class="accordion accordion__trigger"
      :class="{'accordion__trigger_active': visible}"
      @click="open">
    <li class="accordion__item" v-for="category in MAIN_CATS">
        <nuxt-link exact no-prefetch active-class="link-active"
                   :to="`/category/${category.id}`"
                   class="menu-button">
          {{ category.title }}
        </nuxt-link>
        <div class="accordion__content">
          <div class="menu-sub-list" v-show="visible">
              <ul class="sub-list">
                <li class="menu-item"
                    v-for="sub in SUB_CATS(category.id)"
                    :key="sub.id">
                  <nuxt-link :to="`/category/${sub.id}`" class="menu-button">
                    {{ sub.title }}
                  </nuxt-link>
                </li>
              </ul>
          </div>
        </div>
    </li>
  </ul>

码：

name: "acc",
  data() {
    return {
      index: null,
      Accordion: {
        count: 0,
        active: null
      }
    };
  },
  computed: {
    ...mapGetters([
      'MAIN_CATS',
      'SUB_CATS'
    ]),
    visible() {
      return this.index === this.Accordion.active;
    }
  },
  methods: {
    ...mapActions([
      'GET_CATEGORIES_LIST',
    ]),
    open() {
      if (this.visible) {
        this.Accordion.active = null;
      } else {
        this.Accordion.active = this.index;
      }
    },
    start(el) {
      el.style.height = el.scrollHeight + "px";
    },
    end(el) {
      el.style.height = "";
    }
  },
  created() {
    this.index = this.Accordion.count++;
  },
  mounted() {
    this.GET_CATEGORIES_LIST()
  },

我有一个带有手风琴的列表，当您单击一个项目时，所有项目都将打开，我只需要打开一个项目，我知道需要循环访问所有项目并将类应用于特定的项目，但是如何为此，请帮忙

雅各布·苏普立克

您的代码和所引用答案的代码之间存在多个差异。

您会注意到它@click与放在同一行v-for。

这样做的主要原因是能够轻松访问index循环中的每个元素。

为了不让您感到复杂，我创建了一个基本的用例场景：

<template>
  <div id="accordion" class="accordion-container">
    <ul
      v-for="(category, index) in items"
      :key="index"
      class="accordion accordion__trigger"
      :class="{'accordion__trigger_active': visible===index}"
      @click="visible=index"
    >
      <li class="accordion__item">
        {{ category.title }}
        <div class="accordion__content">
          <div class="menu-sub-list" v-show="visible===index">
            <ul class="sub-list">
              <li class="menu-item">{{ category.sub }}</li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "trial-page",
  data() {
    return {
      items: [
        {
          title: "Accordion 1",
          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          sub: "Pellentesque risus mi"
        },
        {
          title: "Accordion 2",
          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          sub: "Pellentesque risus mi"
        },
        {
          title: "Accordion 3",
          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          sub: "Pellentesque risus mi"
        }
      ],
      visible: null
    };
  }
};
</script>

<style>
.accordion__trigger_active {
  background-color: blue;
  color: white;
}
</style>

您可以看到，在这种情况下，想法是使用index分配给visibledata属性的值进行操作。

我们仅检查值是否visible等于当前按下的项目index。

这样，我们就可以有条件地v-show触发并触发类:class="{'accordion__trigger_active': visible===index}"。

请注意，如果v-for同一组件中有更多循环，则需要确保用于的值visible始终是唯一的，为此，您可以简单地向其中添加一些字符串，例如：

@click="visible=index+'category'"

还记得:key使用时分配一个v-for。

例： v-for="(category, index) in items" :key="index"

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。