Question

我正在学习vueJS并且有2个可共享相同方法的可点击div。因此，当我单击其中一个div时，两个动作都会发生。

对div进行@click操作的最佳方法是什么？这个div是被点击的。

所以我试图仅在被点击的一个（div）上打开和关闭菜单。

<div class="row">
  <div class="col-sm-3">
    <div class="mainbox-wrapper">
      <div class="mainbox">text</div>
      <div class="selectbox" @click="actionMenu" id="foo" ref="foo">select box</div>
      <div class="menu" v-show="isShow">select box</div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="mainbox-wrapper">
      <div class="mainbox">text</div>
      <div class="selectbox" @click="actionMenu" id="bar" ref="bar">select box</div>
      <div class="menu" v-show="isShow">select box</div>
    </div>
  </div>
</div>

JS

  methods:{
    actionMenu(event){
      let targetId = event.currentTarget.id;
      this.isShow = !this.isShow;
    }
  }

Answer 1

您可以切换相关div的类：

，而不是v-show指令

actionMenu(event){
   event.target.nextElementSibling.classList.toggle('d-none');
}

d-none类适用于bootstrap 4.如果您使用它，那么它很棒，但如果您不使用，那么您可以添加自己的类。

.d-none {
  display: none; /* bootstrap uses !important as well */
  /* if you wish, you can add !important */
}

Answer 2

而不是使用v-on而不是@click，您可以了解有关HTML侦听器的更多信息here

您的HTML：

<div class="col-sm-3">
   <div class="mainbox-wrapper">
   <div class="mainbox">text</div>
      <div class="selectbox" v-on="click: onClick" id="foo" ref="foo">select box</div>         
  </div>
</div>

和你的js

methods: {
        onClick: function (e) {
          console.log(e.currentTarget.id;)
          }
    }

使用这个（点击的那个）与VueJs

2 个答案: