解决vue-clipboard2复制异步数据第一次报错第二次才成功

前言

有一项业务需要先向后台发送请求，将请求到的内容复制到剪切板上。刚开始，我使用前端框架自带的插件clipboardjs，复制异步数据第一次无效，因为数据为空，第二次才成功，用异步的话也会报错。这个问题困扰我很久了，百度了一堆水文，都是复制粘贴大法。。。有的甚至连原文的格式都没有完全复制，敷衍至极。

解决过程

我以为是插件的问题，我就卸载了原来的clipboardjs插件，安装了vue-clipboard2插件

# 卸载插件
npm uninstall clipboard

# 安装插件
npm install --save vue-clipboard2

// 全局引用
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

 下面是官方的demo，我是在这个基础上改了些代码

<div id="app"></div>

<template id="t">
  <div class="container">
    <input type="text" v-model="message">
    <button type="button" @click="doCopy">Copy!</button>
  </div>
</template>

<script>
  new Vue({
    el: '#app',
    template: '#t',
    data: function () {
      return {
        message: 'Copy These Text'
      }
    },
    methods: {
      doCopy: function () {
        this.$copyText(this.message).then(function (e) {
          alert('Copied')
          console.log(e)
        }, function (e) {
          alert('Can not copy')
          console.log(e)
        })
      }
    }
  })
</script>

我的代码

<template>  
  <el-tooltip content="复制到剪切板">
    <el-button
      type="text"
      @click.prevent="handleCopyPw(scope.row.id)"
    >
      <vab-icon
        icon="file-copy-line"
        style="font-size: 16px; color: #606266"
      />
    </el-button>
  </el-tooltip>  
</template>  

<script>
  // 接口
  import { viewPW } from '@/api/password'
  data() {
    return {
      copy_pass: '',
    }
  },
  methods: {
    // 通过接口获取数据
    async getData(id) {
      this.copy_pass = ''
      const { data } = await viewPW(id)
      this.copy_pass = data.password
    },
    // 异步复制
    async handleCopyPw(id) {
      await this.getData(id)
      this.$copyText(this.copy_pass).then(
        function (e) {
          alert('复制成功')
        },
        function (e) {
          alert('复制失败')
        }
      )
    }
  }
</script>

---

Github地址： 

Inndy/vue-clipboard2: A simple vue2 binding to clipboard.js (github.com)

官网：

vue-clipboard2 | A simple vue2 binding to clipboard.js (inndy.tw)

clipboard.js — Copy to clipboard without Flash (clipboardjs.com)