floating-vue icon indicating copy to clipboard operation
floating-vue copied to clipboard

Can't trigger on click, getting [object Object] for content

Open xlcrr opened this issue 6 years ago • 3 comments

Hi, hope someone can help me please. I can get the hover working, but I can't get this to work using multiple options with an object to enable trigger: 'click'

I am trying to combine v-tooltip with v-clipboard:copy - which could make for a great integration of packages btw. When the user clicks a button, the text on :copy is copied to the keyboard, and the user should get a tooltip.

In my app.js file,

import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard); // this works.

import VTooltip from 'v-tooltip'
Vue.directive('v-tooltip', VTooltip); // default hover works for me but breaks down when I pass an object into v-tooltip instead of =" 'Text' "

// component

<button v-clipboard:copy="item.url"
             v-tooltip="{ content: 'Copied', trigger: 'click' }"
>Copy URL</button>

I am also importing all of the styling in the .vue file where I am implementing this action.

With this approach I get the following error

screen shot 2019-02-05 at 16 08 49

  1. Click does not work
  2. Text still shows on hover
  3. [object Object] is shown instead of the value of content: 'Copied'

What am I doing wrong? How can an object be passed and triggered on click?

Many thanks.

xlcrr avatar Feb 05 '19 16:02 xlcrr

Can you replicate in a jsfiddle or something? I tried in a project of mine but everything works fine

albertodeago avatar Feb 28 '19 10:02 albertodeago

I cannot reproduce.

Akryum avatar Apr 28 '19 22:04 Akryum