Question

所以，第一个v-on点击工作，但当我尝试触发它下面的那个时，没有任何反应。我假设你不能像这样嵌套不同的onclicks？在这种情况下，我不能只使用相同的v-on click，因为添加的类将触发不同的行为。

 <div id="menu">
    <div class="menu" v-on:click="toggle" v-bind:class="{ active: isActive }">
        Hey
        <div class="m-items animated slideInRight" v-on:click="change" v-bind:class="{ display: display }">
            <ul>
                <li><i class="fa fa-toggle-off" aria-hidden="true"></i>Hey</li>
            </ul>
        </div>
    </div>
</div>

var menu = new Vue({
  el: '#menu',
  data: {
    isActive: false,
  },

  methods: {
    toggle: function(event) {
      this.isActive = !this.isActive
    }
  }
})

var displayList = new Vue({
  el: '.m-items',
  data: {
    display: false,
  },

  methods: {
    change: function(event) {
      this.display = !this.display
    }
  }
})

Answer 1

您可以使用event modifiers与v-on:click一起停止在您的案例中传播点击事件，您可以执行以下操作：

<div id="menu">
    <div class="menu" v-on:click="toggle" v-bind:class="{ active: isActive }">
        Hey
        <div class="m-items animated slideInRight" v-on:click.stop="change" v-bind:class="{ display: display }">
            <ul>
                <li><i class="fa fa-toggle-off" aria-hidden="true"></i>Hey</li>
            </ul>
        </div>
    </div>
</div>

两个不同的v-on：同一元素内的点击

1 个答案: