Using this (the one being clicked ) with VueJs

Question

I am learning vueJS and have 2 clickable divs that share the same method. So when I click one of the divs the action happens for both of them.

What is the best way to action an @click on a div (This div) the one that is being clicked.

So I'm trying to open and close a menu only on the one (div) that is being clicked.

<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;
    }
  }

Bhojendra Rauniyar · Accepted Answer · 2018-03-05 04:41:57Z

1

Instead of v-show directive, you can toggle class for the relevant div:

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

d-none class is applicable for bootstrap 4. If you are using it, then it's great but if you're not using, then you can add your own class.

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

answered Mar 5, 2018 at 4:41

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Burgess · Accepted Answer · 2018-03-05 04:23:19Z

0

Rather use v-on than @click, you can learn more about HTML listeners here

Your 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>

and in your js

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

answered Mar 5, 2018 at 4:23

James Burgess

4971 gold badge4 silver badges12 bronze badges

2 Comments

ottz0 Over a year ago

How do I bind this to the div or button which is being clicked though?

James Burgess Over a year ago

in the HTML you specify which method you want to call. in my example, v-on="click: <anyMethodName> "

Collectives™ on Stack Overflow

Using this (the one being clicked ) with VueJs

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related