javascript - 如何在vue中定位特定的ul？

Question

单击时我想扩展特定的 ul，但它正在扩展每个 ul。我无法定位单个 ul。

.ul {
  list-style: none;
  right: 25px;
  bottom: 10px;
  height: 60px;
  overflow: hidden;
  width: 200px;
  border-bottom: 1px solid #cfdada;
}

.landingPage ul.activeClass {
  overflow: auto;
}

<div class="pageContent" v-for="(item,index) in dataBox[selectedTab]">
                    <span v-for="(e,i) in dataBox[selectedTab][index]">
                        <h4>{{i}}</h4>
                        <ul v-bind:class="{activeClass:isActive}">
                            <li v-for="m in e">{{m.name}}</li>
                        </ul>
                        <span v-if="!isActive" v-on:click="{isActive=!isActive}" class="moreIcon">More..</span>
                    </span>
                </div>

Answer 1

isActive 应设置为每个对象 e，您应该像这样更改代码:

computed: {
  activeDataBox () {
    return this.dataBox.map(e => {
      e.isActive = false
      return e
    })
  }
}

<div class="pageContent" v-for="(item,index) in activeDataBox[selectedTab]">
  <span v-for="(e,i) in activeDataBox[selectedTab][index]">
    <h4>{{i}}</h4>
    <ul v-bind:class="{activeClass:e.isActive}">
      <li v-for="m in e">{{m.name}}</li>
    </ul>
    <span v-if="!e.isActive" v-on:click="{e.isActive=!e.isActive}" class="moreIcon">More..</span>
  </span>
</div>