export default {
  data() {
    return {
      visibleShadowRight: true,
      visibleShadowLeft: false,
    };
  },
  destroyed() {
    this.removeListenerScroll();
  },
  methods: {
    addListenerScroll() {
      this.$nextTick(() => {
        this.$refs.container.addEventListener('touchmove', this.onScrollContainer);
      });
    },
    removeListenerScroll() {
      if (this.$refs.container) {
        this.$refs.container.removeEventListener('touchmove', this.onScrollContainer);
      }
    },
    onScrollContainer() {
      const { scrollLeft } = this.$refs.container;

      this.visibleShadowRight = scrollLeft <= 0;
      this.visibleShadowLeft = scrollLeft > 0;
    },
  }
};

onClick(card) {
        const container = document.querySelector(`[data-saved-card="${card.id}"]`);
        container.scrollIntoView({
          behavior: 'smooth',
          block: 'center',
          inline: 'center',
        });
        
        /* other logic */
      },