Question

我试图在我的项目中实现以下内容。我仔细检查了一下，发现实现中没有任何缺陷。但就我而言，单击一个项目即可打开手风琴的所有项目。为什么？

下面是我的代码。

标记：

<div
  v-for="item in faqItems"
  :key="item.id"
  class="faq-item"
  @click="toggle"
>
  <transition
    name="accordion"
    @before-enter="beforeEnter"
    @enter="enter"
    @before-leave="beforeLeave"
    @leave="leave"
  >
    <div v-show="show" class="faq-item-details">
      <div class="faq-item-details-inner" v-html="item.text">
      </div>
    </div>
  </transition>
</div>

JS：

methods: {
  toggle () {
    this.show = !this.show
  },
  beforeEnter (el) {
    el.style.height = '0'
  },
  enter (el) {
    el.style.height = el.scrollHeight + 'px'
  },
  beforeLeave (el) {
    el.style.height = el.scrollHeight + 'px'
  },
  leave (el) {
    el.style.height = '0'
  }
}

Answer 1

我希望您单击该代码即可打开所有项目。原因是它们都在同一个组件中，因此它们都访问相同的<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="phrase"><ul></ul></div> <div id="overlay"></div>变量。

您可以将主要组件作为手风琴容器，而不是将每个元素呈现为单独的组件，每个组件都有其自己的this.show变量：

this.show

Answer 2

所有手风琴都具有相同的show。您可以使用单独的组件（请参见@Moisés Hiraldo的答案）或使用以下逻辑：

HTML

<div
  v-for="item in faqItems"
  :key="item.id"
  class="faq-item"
  @click="toggle(item.id)"
>
  ...
     <div v-show="showItems[item.id]" class="faq-item-details">

JS

data() {
  return {
    showItems: {}
  }
},
methods: {
  toggle (id) {
     const newVal = !this.showItems[id]
     this.$set(this.showItems, id, newVal)
  }
}

如果您只需要一个打开的项目
HTML

<div
  v-for="item in faqItems"
  :key="item.id"
  class="faq-item"
  @click="select(item.id)"
>
  ...
     <div v-show="item.id === selectedItemId" class="faq-item-details">

JS

data() {
  return {
    selectedItemId: null
  }
},
methods: {
  select(id) {
    this.selectedItemId = this.selectedItemId !== id ? id : null
  },
},

为什么单击手风琴项目会打开所有项目？

2 个答案: