Target the textarea of a child component to copy to clipboard

Question

I have a working function which targets a textarea and copies the content to a clipboard. It works great when targeting a textarea directly.

I need the same functionality targeting the textarea within a child component(s). I can't figure out how to target that specific area within each component.

Working example:

<div class="media-label col-md-12">Product Title:</div>

<textarea 
  class="col-md-6 col-md-offset-3" 
  v-model="productTitle" 
  id="productTitle"
></textarea>

<button 
  type="button" 
  class="btn btn-info"
  data-copytarget="#productTitle" 
  v-on:click="copyTextArea"
>
  Copy Title To Clipboard
</button>

The copy function:

 copyTextArea(e) {
   var targetElement = e.target;
   var copiedTarget = targetElement.dataset.copytarget;
   var element = document.querySelector(copiedTarget);
   element.select();
   document.execCommand('copy');
 },

Component setup I'm having issues with:

<ExampleComponent
  title="Title" 
  input-type="textarea"
  v-model="productTitle" 
  id="productTitle" 
></ExampleComponent>

<button 
  type="button" 
  class="btn btn-info"
  copytarget="#productTitle" 
  v-on:click="copyTextArea"
>
  Copy Title To Clipboard
</button>

<ExampleComponent
  title="Description" 
  input-type="textarea"
  v-model="productTitle" 
  id="productTitle"
></ExampleComponent>

<button 
  type="button" 
  class="btn btn-info"
  copytarget="#productTitle" 
  v-on:click="copyTextArea"
>
  Copy Title To Clipboard
</button>

score 9 · Accepted Answer · edited Jul 15 '22 at 20:25

9

Use a ref on the textarea and then reference the element directly in the copyTextArea method:

new Vue({
  el: '#app',
  methods: {
    copyTextArea() {
      this.$refs.text.select();
      document.execCommand('copy');
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div>Product Title:</div>
  <textarea ref="text"></textarea>
  <button @click="copyTextArea">
    Copy Title To Clipboard
  </button>
</div>

edited Jul 15 '22 at 20:25

tony19

125,647
18
229
307

answered Jul 11 '17 at 17:53

thanksd

54,176
22
157
150

can this work for multiple instances of the child component, or do I need to assign a individual $refs id to each one? – Pyreal Jul 11 '17 at 18:01
Within the context of one vue instance, you would need to specify a unique `ref` value for each element you want to reference. In that case you'd need to pass the `ref` value to `copyTextArea` when you call it so that the method can reference the correct `ref` – thanksd Jul 11 '17 at 18:05
Thanks for the help. – Pyreal Jul 11 '17 at 18:08
Uncaught TypeError: this.$refs.text.select is not a function Uncaught TypeError: this.$refs.text.taValue.select is not a function getting an error, this happens if i'm targeting the child component or a property directly. – Pyreal Jul 11 '17 at 18:15
What is `taValue`? – thanksd Jul 11 '17 at 18:30
taValue is just a variable attached to the child component(v-model) we are targeting. getting the same error if I just target this.$refs.text as well. – Pyreal Jul 11 '17 at 18:35
refs reference the vue instance instead of the element when used on a component tag. Read the documentation and maybe post a new question if you're having trouble referencing a component's from a parent component. – thanksd Jul 11 '17 at 18:38
I misunderstood your post at first, once I moved the logic to the child component instead of the parent everything worked out. thanks again for your help. – Pyreal Jul 11 '17 at 18:53

Target the textarea of a child component to copy to clipboard

1 Answers1

Linked