How to add a button to copy displayed text in vue.js?

Question

I'm trying to add a button that will allow me to copy a snippet of code from a view to the clipboard of my code catalog application in vue.js.

When I use the vue clipboard library and try to do this in the example component:

<div class="full-screen-code-snippet">
  {{ example.codeSnippet }}
</div>

<div class="full-screen-copy-button">
<button v-clipboard:copy="example.codeSnippet"></button>    
</div>

The code snippet displays normally, but the button does not display. How is this going? How should I make this button?

Answer 1

You should use it like this: v-clipboard="variableName" or the same as :copy. You can here or this

sssccc