Tengo este código Vue.js:
<div class="border"> <h4>{{ name }}</h4> <div class="code"> <p>{{ code }}</p> <img src="~/assets/img/copy.svg" alt="" @click="copy"/> </div> </div> Hay una función de copy en el botón de copia. Lo que quiero es copiar el campo de code en el portapapeles. Estaba buscando una solución en Internet, pero solo había soluciones para input archivada, pero, como puede ver, solo tengo un párrafo.
Estaba tratando de usar ref e id en ese párrafo, pero no funciona. con ref :
<p ref='code'>{{ code }}</p> copy() { this.$refs.code.focus() document.execCommand('copy') } con id :
<p id='code'>{{ code }}</p> copy(id) { const input = document.querySelector(`#${id}`) input.setAttribute('type', 'text') input.select() document.execCommand('copy') input.setAttribute('type', 'hidden') }Prueba esto
html
<p id="text_element">Copy this !</p> <button onclick="copyToClipboard('text_element')"> Copy to clipboard </button>JavaScript
function copyToClipboard(elementId) { var aux = document.createElement("input"); aux.setAttribute("value", document.getElementById(elementId).innerHTML); document.body.appendChild(aux); aux.select(); document.execCommand("copy"); document.body.removeChild(aux);} function log() { console.log('---') }