CODEWITHSUNDEEP
javascriptvue.jsvuejs3vuetify.jsvuetifyjs3
darkbasic
darkbasic

Reputation: 353

Updating component props via Vue 3 custom directive

I'm quite new to vue and if I'm understanding it correctly directives are quite different from Angular's: they are meant for DOM manipulation and not to mutate the state. That being said though I'm unsure what would be the best pattern to achieve what I need. I want to implement resizable columns in a vuetify table and up to this point this suits well the directive use case. After the resizing is complete I also want to update the headers prop (and in particular its width subprop) that is being passed to the vuetify table because we want to save it localstorage.

HOC might do the trick, but it doesn't look as easy to achieve as in React, especially if you use Typescript. I would also probably have to create a different HOC for every different kind of vuetify table.

Directives looked appealing, but without a way of altering the component state... I guess there might be a way, but for sure it's not documented. Can you think of a better pattern? Is is possible to bend directives to this use case?

<v-data-table-server v-resizable-table="headersObj" :headers="headers"

const headers = ref([...])
const headersObj = ref({ headers })

mounted(el, binding, vnode) {
  binding.value.headers = [...]
},

The previous code is the only way I've managed to update the value of the headers prop passed to v-data-table-server. It works just because being an object the template doesn't unwrap its props.

Is there any way to pass a ref to v-resizable-table in the template without unwrapping it?

Upvotes: 1

Views: 206

Answers (1)

darkbasic
darkbasic

Reputation: 353

<template>
  <component :is="is" :ref="handleResize" v-bind="$attrs" :headers="headers">
    <template v-for="(_, slot) of $slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </component>
</template>

<script setup lang="ts">
const headers = defineModel('headers', { required: true })
defineProps<{ is: string | Component }>()

I ended up creating a Dynamic Wrapper Component, which is basically an HOC in Vue terms.

Upvotes: 0

Related Questions