-1

I'm trying to create a Perfect Scrollbar plugin for Vue3 but i'm stuck on an error when i initialize the object:

Error: no element is specified to initialize PerfectScrollbar

Scrollbar component:

import PerfectScrollbar from 'perfect-scrollbar'
import { isEmpty } from 'lodash'
import {
 onMounted,
 reactive,
 ref,
 h
} from 'vue'

export default {
  name: 'VuePerfectScrollbar',
  props: {
    options: {
      type: Object,
      required: false,
      default: () => {
      }
    },
    tag: {
      type: String,
      required: false,
      default: 'div'
    }
  },
  setup(props, {emit, slots}) {
    const el = ref(null)
    let ps = reactive({})
    
    onMounted(() => {
      if (isEmpty(ps)) {
        ps = new PerfectScrollbar(el, props.options)

      }
    })


    return () => h(
      props.tag,
      {
        class: 'ps',
        ref: el
      },
      slots.default && slots.default()
    )
  }
}

I did a console.log right before the initialization and the element reference is there, so i'm not sure why the error pops up. According to this This error simply means that you are calling PerfectScrollbar on something that doesn't exist! so maybe the DOM hasn't been updated at that moment? I tried with nextTick too but it didn't work.

Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
Petru Lebada
  • 2,167
  • 8
  • 38
  • 59
  • what does `if (isEmpty(ps)) {` do? – Boussadjra Brahim Jan 10 '21 at 19:18
  • @BoussadjraBrahim, i forgot to add the lodash import. It is a lodash function to check the object state. On the second line of setup i declare a ps reactive empty object and later on the create method i update it with the new PerfectScrollbar object – Petru Lebada Jan 10 '21 at 20:17

1 Answers1

1

You should get access to the value attribute in the ref property as follows :

ps = new PerfectScrollbar(el.value, props.options)
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164