Vue.js 将要复制到剪贴板的子组件的文本区域作为目标

我有一个工作功能，它以文本区域为目标，并将内容复制到剪贴板。当直接针对文本区域时，它非常有效

我需要在子组件中针对textarea的相同功能。我不知道如何针对每个组件中的特定区域

工作示例：

<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>

组件设置我遇到问题：

<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>

将标题复制到剪贴板
将标题复制到剪贴板

在文本区域使用a，然后直接在

copyTextArea

方法中引用元素：

newvue({
el:“#应用程序”，
方法：{
copyTextArea（）{
这是.$refs.text.select（）；
document.execCommand（'copy'）；
}
},
})

产品名称：
将标题复制到剪贴板

这是否适用于子组件的多个实例，或者我是否需要为每个实例分配单独的$refs id？在一个vue实例的上下文中，您需要为要引用的每个元素指定唯一的

ref

值。在这种情况下，您需要在调用时将

ref

值传递给

copyTextArea

，以便该方法可以引用正确的

ref

，感谢您的帮助。Uncaught TypeError:this.$refs.text.select不是函数Uncaught TypeError:this.$refs.text.taValue.select不是获取错误的函数，如果我直接针对子组件或属性，就会发生这种情况。什么是

taValue

？

<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>