How to assign class to template ref? -- VueJS 3 Typescript Component API

Question

How do I add/remove CSS classes from a template ref using the Vue 3 Composition API and typescript?

I am running into the following typescript errors for modal.value:

const modal = ref(null) returns Object is possibly 'null'.
const modal = ref<HTMLDivElement | undefined>() return Object is possibly 'undefined'.

<template>
    <button @click="hideModal">Hide</button>
    <div class="show" ref="modal"></div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
    ...
    setup(){
        const modal = ref(null)
        const hideModal = () => modal.value.classList.remove('show')

        return {modal, hideModal}
    }
})
</script>

These two options work, however, could someone explain if this is or is not a preferred method.

Option A:

const modal = ref()
const hideModal = () => modal.value.classList.remove('show')

Option B:

const modal = ref({})
const hideModal = () => (modal.value as HTMLDivElement).classList.remove('show')

Does this answer your question? Object is possibly 'null'. on a ref(null) — Steven B.
– Steven B., Commented Jun 19, 2021 at 3:29
@StevenB. Thank you, but not quite. I just added a couple of options which seem to work, but I do not know if they are "preferred" implementations. — Ryan Prentiss
– Ryan Prentiss, Commented Jun 19, 2021 at 3:46

tony19 · Accepted Answer · 2021-06-19 04:10:29Z

2

DOM manipulation should be avoided because Vue will overwrite those changes if the component needs to be rerendered.

You could use a class binding instead. That would also obviate the template ref (modal) if it were only intended for modifying the element's class list:

<template>
    <button @click="hideModal">Hide</button>
    <div :class="{ show: isShown }"></div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
    setup(){
        const isShown = ref(false)
        const hideModal = () => isShown.value = true

        return { isShown, hideModal }
    }
})
</script>

If your style for the show class is only setting CSS visibility, consider using the v-show directive instead:

<div v-show="isShown"></div>

...or the v-if directive:

<div v-if="isShown"></div>

edited Jun 19, 2021 at 4:10

answered Jun 19, 2021 at 3:47

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to assign class to template ref? -- VueJS 3 Typescript Component API

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related