[Question] How can I put an @click-event in a generated <button>?
Hi, I'm currently trying to trigger an @click-event with a generated string of a . I'm receiving a payload and I'm modifiyng the object 'request_uri' to make it look like this:
`<button class="table-btn" @click="copyRequestURI(${value});"> URI kopieren </button>`
So far so good, the button shows up and I can click it BUT the @click-event doesn't trigger and I can't find out how to make it trigger. Does anyone have an idea? All this button does is to copy the URI that's behind value.
Thank you in advance.
When you use string interpolation for @click handler, Vue will treat it as a string literal, not as a function call. To fix this issue, you need to use a method to generate the dynamic value and bind the @click event to that method instead. For example, you can define a method called generateCopyRequestURIHandler in your component, and call it in the template:
<template>
<button class="table-btn" @click="generateCopyRequestURIHandler(value)"> URI kopieren </button>
</template>
<script>
export default {
methods: {
generateCopyRequestURIHandler(value) {
return () => {
this.copyRequestURI(value)
}
},
copyRequestURI(value) {
// your code to copy the URI
}
}
}
</script>
@luca-dev In that case, you might try a custom directive to generate the dynamic @click handler. Define a custom directive v-copy-uri that accepts a value as its argument and when the directive is bound to an element, it adds a click event listener to the element that calls the copyRequestURI method with the value of the directive:
<template>
<button class="table-btn" v-copy-uri="value"> URI kopieren </button>
</template>
<script>
export default {
directives: {
'copy-uri': {
bind: function(el, binding) {
el.addEventListener('click', () => {
this.copyRequestURI(binding.value)
})
}
}
},
methods: {
copyRequestURI(value) {
// your code to copy the URI
}
}
}
</script>
@lbecket thanks but I found an approach that worked since I was limited to a literal string and couldn't put the button in the template. I did this (and I know it isn't the best approach): onclick="navigator.clipboard.writeText('${value}') and it works just fine.
Regardless of my solution, thank you for your contribution :)
