I am facing an issue where I need to make HTML elements visible, but they appear invisible upon rendering.
Below is my HTML code:
<div class="created-links-wrapper" v-for="item in createdUrls" :key="item._id">
<div class="created-link-col">
<button v-on:click="copyToClipboard" :id="item.id">Copy</button>
</div>
</div>
However, after rendering, it looks like this:
<button>Copy</button>
I aim to copy text from an input field in the following manner:
copyToClipboard: function(e){
var buttonId = e.target.id;
var selectedInput = document.getElementsByName(buttonId)[0];
selectedInput.focus();
selectedInput.select();
selectedInput.setSelectionRange(0, 99999);
document.execCommand("copy");
},
}
The input is dynamic and changes when I click the "Add URL" button.
[SOLVED]
To resolve the issue, I changed my attribute from item.id to item._id.