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

Usage with vue-class-component?

Open orels1 opened this issue 7 years ago • 4 comments
trafficstars

So I'm using vue-class-component in my project. And I was wondering if there was a way to make it work. No luck so far. I tried doing it in two different ways.

By passing the notifications object to the decorator and then defining the method that should call it in the decorator as well:

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import VueNotifications from 'vue-notifications';

@Component({
  notifications: {
    copySuccess: {
      title: 'Copied to clipboard!',
      type: VueNotifications.types.success,
    },
  },
  methods: {
    copyNotify: function copyNotify() {
      this.copySuccess();
    },
  },
})
export default class CodeBlock extends Vue {
  copy() { // this method is bound to `@click`
    this.copyNotify();
  }
}
</script>

And by calling the copySuccess directly from the class method:

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import VueNotifications from 'vue-notifications';

@Component({
  notifications: {
    copySuccess: {
      title: 'Copied to clipboard!',
      type: VueNotifications.types.success,
    },
  },
})
export default class CodeBlock extends Vue {
  copy() { // this method is bound to `@click`
    this.copySuccess();
  }
}
</script>

In both cases this.copySuccess is undefined.

vue-class-component has mixins support, but it requires mixins to be also defined as classes, as I understand.

This is my configuration code, just in case

import Vue from 'vue';
import VueNotifications from 'vue-notifications';
import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

const toast = ({ title, message, type, timeout }) => {
  const checkedType = type === VueNotifications.types.warn ? 'warning' : type;
  return iziToast[checkedType]({ title, message, timeout });
};

const options = {
  success: toast,
  error: toast,
  info: toast,
  warn: toast,
};

Vue.use(VueNotifications, options);

orels1 avatar Feb 22 '18 10:02 orels1

So moving this to the @Component block (the first option) worked for me for those curious.

This is on the latest version of vue-class-component at the time of writing.

jalcine avatar Jul 23 '18 05:07 jalcine

I guess i'll give it another try with the updated packages

orels1 avatar Jul 24 '18 16:07 orels1

I'm on version 0.9.0 for the record.

jalcine avatar Jul 24 '18 21:07 jalcine

Does 0.9.0 work for you @orels1?

jalcine avatar Jul 28 '18 23:07 jalcine