I am using a custom v-directive "v-clip" and it requires a value. In my case i want to use 'data binding'. Which means the value for v-clip can change on the fly from other interactions on the website.
In this case I've implemented a simple example where every time a user clicks a button called 'Counter' it increments the value by 1. How can I retrieve the most up to date value when the user clicks on the custom directive which prints to the console.
Is there a way i can use vnode or something to retrieve the value. I would imagine the directive would be able to someone get the updated value.
clip directive
Vue.directive('clip', {
bind: (el, binding, vnode) => {
const clickEventHandler = (event) => {
console.log(binding.value)
}
el.addEventListener('click', clickEventHandler)
},
})
It's used like this where the variable counter is dynamically changed when a button is clicked in the ui.
<div v-clip="counter">Clip A {{ counter }}</div>
From Vue.js 2 guide:
If you need to share information across hooks, it is recommended to do so through element’s dataset.
So, if I understand correctly your question, you can try in the following way:
Vue.directive('clip', {
bind: (el, binding) => {
const clickEventHandler = () => {
console.log(el.getAttribute('data-clipvalue'))
}
el.addEventListener('click', clickEventHandler)
el.setAttribute('data-clipvalue',binding.value)
},
update: (el,binding) => {
el.setAttribute('data-clipvalue',binding.value)
}
})