How to pass multiple parameters to a directive?

Question

Vue.js

Hello, I want to pass two parameters to the directive (a string and a number): v-scroll-text="'.source-label', 10"how to do it correctly, I can’t google an example (

All code

<li
                        v-for="source in pageSources"
                        :key="source"
                        class="source"
                        v-scroll-text="'.source-label'"
                    >
                       <div class="source-label">
                          <span class="source-name" @click="selectSource(source)">
                              {{ source }}
                          </span>
                       </div>
                    </li>

scrollText(el, selector, speed) {
        console.log(speed)
        let hoverTimeOutFn = null
        const timeout = 500
        el.addEventListener("mouseenter", (e) => {
            const target = e.target
            const nameEl = target.querySelector(selector.value)
            const textEl = nameEl.firstChild
            const nameELRect = nameEl.getBoundingClientRect()
            const textElRect = textEl.getBoundingClientRect()
            const translateX = Math.min(nameELRect.width - textElRect.width, 0)
            const pxPerInterval = 10
            const interval = 120
            const time = Math.abs((translateX / pxPerInterval) * interval)
            clearTimeout(hoverTimeOutFn)
            hoverTimeOutFn = setTimeout(() => {
                textEl.style.display = "inline-block"
                textEl.style.transition = `transform ${time}ms linear`
                textEl.style.transform = `translateX(${translateX}px)`
            }, timeout)
        })
        el.addEventListener("mouseleave", (e) => {
            const target = e.target
            const nameEl = target.querySelector(selector.value)
            const textEl = nameEl.firstChild
            textEl.style.transition = `transform ${timeout}ms linear`
            textEl.style.transform = ""
            clearTimeout(hoverTimeOutFn)
            hoverTimeOutFn = setTimeout(() => {
                textEl.style.display = "initial"
            }, timeout)
        })
    },

Answer 1

pass the object:

v-scroll-text="{ selector: '.source-label', speed: 10 }"

scrollText(el, { value: { selector, speed } }) {
  ...