Skip to content

Commit

Permalink
fix(clipboard): when click the copy button the data is not copied wit…
Browse files Browse the repository at this point in the history
…h `v-clipboard:copy`

Error:
- When the copy button is pressed a success alert is displayed, but the console message `Clipboard input is empty` appears.
- This message appears despite fixing the issue, it is a package problem and is not fixed at this time.

Reason:
- The `v-clipboard:copy` directive of the `vue-clipboard2` package does not exist in the `v-clipboard` package.
- When using the `v-clipboard` directive of the `v-clipboard` package to execute a method (`copyData`), it no longer returns the copied value (`json`) by itself, as towards the `v-clipboard:copy` directive of the `vue-clipboard2` package.

Solution:
- Replace the `v-clipboard:copy` directive with the `v-clipboard` directive.
- The `copyData` method needs to use `this.$clipboard.copy(value)` or `Clipboard.copy(value)` to copy the value.
In this case, since the package has been imported globally, `this.$clipboard.copy(value)` would be used, but with `setup` we cannot use `this`. So import `Clipboard` from `v-clipboard` package  into the component and use `Clipboard.copy(value)` instead.
You need to globally import the `v-clipboard` package to use the `v-clipboard` directive.

References:
- euvl/v-clipboard#39
- https://www.npmjs.com/package/vue-clipboard2
- https://www.npmjs.com/package/v-clipboard
- https://codesandbox.io/p/sandbox/mystifying-breeze-csgc5f?file=%2Fsrc%2FApp.vue%3A43%2C7-43%2C22
  • Loading branch information
beatrizsmerino committed Mar 21, 2024
1 parent 174fc16 commit 526d1d6
Showing 1 changed file with 3 additions and 2 deletions.
5 changes: 3 additions & 2 deletions src/components/EditorJSON.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
/>
<div class="editor-json__actions">
<button
v-clipboard:copy="copyData"
v-clipboard="copyData"
v-clipboard:success="copyDataSuccess"
v-clipboard:error="copyDataError"
type="button"
Expand Down Expand Up @@ -48,6 +48,7 @@
import { ref, onMounted, defineProps } from "vue";
import "vanilla-jsoneditor/themes/jse-theme-dark.css";
import JsonEditorVue from "json-editor-vue";
import { Clipboard } from "v-clipboard";
const props = defineProps({
"apiUrl": {
Expand Down Expand Up @@ -86,7 +87,7 @@
};
const copyData = () => {
JSON.stringify(json.value);
Clipboard.copy(JSON.stringify(json.value));
};
const copyDataSuccess = () => {
Expand Down

0 comments on commit 526d1d6

Please sign in to comment.