在 VueJs 中使用这个（被点击的那个）

Question

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

在被点击的 div（这个 div）上执行@click 的最佳方式是什么。

所以我试图只在被点击的那个（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

代替v-show 指令，您可以切换相关div 的类：

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

d-none class 适用于 bootstrap 4。如果您正在使用它，那很好，但如果您不使用，那么您可以添加自己的 class。

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

Answer 2

与其使用@click，不如使用 v-on， 你可以了解更多关于 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;)
          }
    }