Javascript 如何在Vue.js中将InnerHtml复制到剪贴板？

我想将此for循环的内容复制到剪贴板：

<div ref="text" class="links">
        <div class="row" v-for="(name, index) in resultNames" :key="index" >                                    
            <p>{{makeUrl(name)}} </p>
        </div>   
</div>  
<button   @click="handleCopy">Copy to Clipboard</button> 

但这导致：

Uncaught TypeError: this.$refs.text.select is not a function

因此，我不知道如何在不使用第三方javascript插件的情况下解决这个问题

p.S.我尝试了一些特定于JS的建议答案，如，但出现错误：

Uncaught TypeError: Failed to execute 'selectNode' on 'Range': parameter 1 is not of type 'Node'.

根据答案，这里有一个选择

HTMLElement

文本的函数：

selectText(element) {
  var range;
  if (document.selection) {
    // IE
    range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    range = document.createRange();
    range.selectNode(element);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  }
}

剩下要做的是a）传递元素b）调用copy命令：

this.selectText(this.$refs.text); // e.g. <div ref="text">
document.execCommand("copy");

this.selectText（this.$refs.text）；//例如
文件。执行命令（“副本”）；

您可以使用npm:vue剪贴板上的vue插件

让我们首先创建要复制的html数据。之后，我们可以使用npm插件来复制html数据

new Vue({
    el: '#app',
    data: {
        HTMLcontent:'',
        resultNames:["John","Steward","Rock"]
    },
    created() {
    },
    methods:{
        makeData(){
            var self = this;
            for(var i = 0; i < self.resultNames.length; i++){
                self.HTMLcontent += '<p>'+self.resultNames[i]+'</p>';
            }
        },
        copyData(){
            this.makeData();
            console.log(this.HTMLcontent);
        }
    }
});

之后，对copyData函数进行如下更改

copyData(){
    this.makeData();
    this.$clipboard(this.invite_code);
    alert("Copied to clipboard");
}

---

希望能解决您的查询

也有同样的问题，但vue剪贴板和剪贴簿2对我没有帮助

在复制到Clipboard的结果中，我使用了JQuery和vue事件

HTML部分

<div class="input-group">
  <input type="text" class="form-control copyLinkInput" :value="link">
  <div class="input-group-append" @click="doCopy">
    <div class="input-group-text">
      <i class="fas fa-copy"></i>
    </div>
  </div>
</div>

---

您只需将数据镜像到一个隐藏的

中并使用它。您需要将

innerHTML

放入

文本区域

，然后选择并复制它。@ChrisG我该怎么做？从表面上看，这里唯一的问题是如何选择

的文本。您不熟悉Vue/JS并不意味着您可以将所有的工作委托给我们。对我来说效果很好：它不起作用-出现错误消息：v-on处理程序中出现错误：“TypeError:未能在“范围”上执行“selectNode”：参数1不是“Node”类型。”当我将div的ref作为参数时。@Schroet请确保您的div只包含要复制的文本。在我的示例中，我使用它复制了一个电话号码：{{phone_icon.phone}}供vue 2使用

copyData(){
    this.makeData();
    this.$clipboard(this.invite_code);
    alert("Copied to clipboard");
}

<div class="input-group">
  <input type="text" class="form-control copyLinkInput" :value="link">
  <div class="input-group-append" @click="doCopy">
    <div class="input-group-text">
      <i class="fas fa-copy"></i>
    </div>
  </div>
</div>

...

props: ['link'],
methods: {
  doCopy: function (e) {
    let selectEl = $(e.target).parents('.input-group').find('.copyLinkInput')[0];

    selectEl.select();
    document.execCommand("copy");
  }
}

...