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)
}
}
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.
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>