I kept getting the error TypeError: "this.$copyText is not a function" when trying to use vue-clipboard2 Show archive.org snapshot in a standalone webpage. I finally got it to work:
<head>
.
.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-clipboard2@0.3.1/dist/vue-clipboard.js"></script>
</head>
<body>
.
.
<div id="vMessage" class="text-field">
<textarea v-model="message" placeholder="Write some message"></textarea>
</div>
<script>
var vmMessage = new Vue({
el: '#vMessage',
data: function () {
return {
message: ''
}
},
methods: {
doCopy: function () {
this.$copyText(this.message).then(function (e) {
alert('Copied')
console.log(e)
}, function (e) {
alert('Can not copy')
console.log(e)
})
}
}
});
// copy textarea to clipboard
vmMessage.doCopy();
</script>
</body>
The minified version works just as well:
<script src="https://cdn.jsdelivr.net/npm/vue-clipboard2@0.3.1/dist/vue-clipboard.min.js"></script>
To copy the text in textarea, simply execute vmMessage.doCopy() in the script.
Posted by kiatng to Vue.js (2019-10-07 01:19)