How to querySelect Vuejs element on click-CodePudding

I want to querySelect the exact element that is click on vueJs

<a @click="myFunc()"> Click Me </a>

And edit this element using js querySelector

methods : {
 myFunc(){
  document.querySelector(this)
 }
}

CodePudding user response：

In your case, there is an easier solution than query select.

Html:

<a @click="myFunc"> Click Me </a>

(note that I've removed the ())

Vue:

methods : {
 myFunc(e){
   console.log(e.target)
 }
}

You can use the event generated by the DOM instead of trying to search for the element.

CodePudding user response：

You can use ref:

new Vue({
  el: '#demo',
  data() {
    return {

    }
  },
  methods : {
     myFunc(){
      this.$refs.link.innerText = 'selected'
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <a ref="link" @click="myFunc"> Click Me </a>
</div>