Vue js 切换列表中的项目

Question

我想创建一个侧边菜单栏。当应该显示li 时，我添加了一个类show。

但在我的情况下，当显示一个项目（第一个）并单击下一个（第二个）项目时，第一个被折叠（这很好）但第二个不会立即显示。

new Vue({
  el: '#app',
  methods: {
    setActiveItemId(itemIndex) {
      this.activeItemId = itemIndex
      this.isActive = !this.isActive
    }
  },
  data: {
    message: 'Hello Vue.js!',
    isActive: false,
    activeItemId: '',
    sideBar: [{
        name: "Dashboard",
        url: "/dashboard",
        icon: "ti-world",
        children: [{
            name: "Buttons",
            url: "/components/buttons",
            icon: "fa-book",
          },
          {
            name: "Social Buttons",
            url: "/components/social-buttons",
            icon: "icon-puzzle",
          }
        ]
      },
      {
        name: "Components",
        url: "/components",
        icon: "ti-pencil-alt",
        children: [{
            name: "Buttons",
            url: "/components/buttons",
            icon: "fa-book",
          },
          {
            name: "Social Buttons",
            url: "/components/social-buttons",
            icon: "icon-puzzle",
          }
        ]
      }
    ]
  }
})

.collapse.show {
  display: block;
}

.collapse {
  display: none;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.collapse.list-unstyled {
  padding-left: 15px;
}

<script src="https://unpkg.com/vue"></script>


<div id="app">
  <ul class="list-unstyled">
    <li>
      <a>
        <i class="ti-home"></i>Home</a>
    </li>
    <li v-for="(x, itemIndex) in sideBar" :key="itemIndex">
      <a @click="setActiveItemId(itemIndex)">
        <i class="fa" :class="x.icon"></i>{{x.name}}
      </a>
      <ul :id="x.id" class="collapse list-unstyled" :class="{'show':activeItemId === itemIndex  && isActive}">
        <li v-for="y in x.children" :key="y.id">
          <a>{{y.name}}</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

那么，当点击第二个项目时，如何折叠第一个并立即显示第二个？

Fiddle

Answer 1

问题在于，在您的setActiveItemId 方法中，您总是切换isActive 状态，而不管正在激活哪个项目。这意味着它会切换同一个项目，但是当跳转到另一个项目时，您必须单击两次。我会采用不同的方法，其中isActive 是一个计算属性，而不是驻留在数据中。

// ...
methods: {
    setActiveItemId(itemIndex) {
        // If item is currently selected, toggle
        if (itemIndex === this.activeItemId) {
            this.activeItemId = ''
            return
        }
        this.activeItemId = itemIndex
    }
},
computed: {
    isActive () {
        return this.activeItemId !== ''
    }
}

这是更新后的小提琴：

https://jsfiddle.net/2ytuL46c/3/

无关但值得注意：请记住，您的 data 必须是返回数据对象的函数，而不是对象本身。