Vue js切换每个元素的类

Question

虽然在Vuejs中有许多切换类的例子,但我还没有找到一个切换类缩小范围的类.如果我像这样定义一个全局变量:

data: {
  toggle: false
}

当我有一个元素时,我会遇到一个问题,比如这个导航栏:

<ul class="menu">
  <li class="has-dropdown" v-bind:class="{ 'is-open': toggle }" @click="toggle = !toggle">
    Foo
    <ul class="dropdown">
      <li>Dropdown Item 1</li>
      <li>Dropdown Item 2</li>
    </ul>
  </li>
  <li class="has-dropdown" v-bind:class="{ 'is-open': toggle }" @click="toggle = !toggle">
    Bar
    <ul class="dropdown">
      <li>Dropdown Item 1</li>
      <li>Dropdown Item 2</li>
    </ul>
  </li>
</ul>

看看这里发生了什么？如果我点击这两个元素中的一个,两个元素都会同时切换类,因为它正在改变一个全局变量.现在,我将如何切换仅单击的元素的类？

Answer 1

令人难以置信的是，如此简单的事情需要使用现代框架进行如此多的代码，这也是 JavaScript 开发变得如此复杂的一个原因。我求助于使用一个普通的 JavaScript 监听器来解决这个问题。

<li class="has-dropdown" @click="toggle">
    ...
</li>

...

methods: {
 toggle: function( event ) {
   event.target.classList.toggle('is-open')
 }
}

...

Answer 2

这只是@SLaks 在他的回答中提到的一个小例子。本质上将列表元素转换为它们自己的组件，以便它们可以拥有自己的状态。

Vue.component("clicktoggle", {
  template:`<li :class="{ 'is-open': toggle }" @click="toggle = !toggle"><slot></slot></li>`,
  data() {return {toggle: false}}
})

这是它的使用方式。

Vue.component("clicktoggle", {
  template:`<li :class="{ 'is-open': toggle }" @click="toggle = !toggle"><slot></slot></li>`,
  data() {return {toggle: false}}
})

console.clear()

Vue.component("clicktoggle", {
  template:`<li :class="{ 'is-open': toggle }" @click="toggle = !toggle"><slot></slot></li>`,
  data() {return {toggle: false}}
})

new Vue({
  el:"#app"
})

.has-dropdown {
  cursor: pointer;
}
.has-dropdown:not(.is-open) ul {
  display: none
}

Vue 使敲除这样的小组件变得异常简单。一个快速提高可能会增加一个属性来指定什么你想切换类。

Answer 3

VueJS(以及大多数其他现代Web框架)的基本指导原则是一切都来自模型.

你从不谈论操纵DOM; 相反,你制作一个描述你想要的效果的模型.

在您的情况下,这意味着您需要两个data属性,而不是一个.

但是,您实际应该做的是使每个列表项成为自己的子组件(然后将获得自己的模型).使用插槽指定每个插槽中的不同内容.