Как назначить класс шаблону ref? API компонента VueJS 3 Typescript

Как мне добавить / удалить классы CSS из шаблона ref с помощью Vue 3 Composition API и машинописного текста?

Я столкнулся со следующими ошибками машинописного текста для modal.value:

  1. const modal = ref(null) возвращает Возможно, объект имеет значение "null".
  2. const modal = ref<HTMLDivElement | undefined>() return Возможно, объект "не определен".
<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>

Эти два варианта работают, однако, кто-нибудь может объяснить, является ли этот метод предпочтительным или нет.

Вариант А:

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

Вариант Б:

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

typescript javascript vue.js vuejs3 vue-composition-api
person Ryan Prentiss    schedule 19.06.2021    source источник
comment
Отвечает ли это на ваш вопрос? Возможно, объект имеет значение «null». по ссылке (null)   -  person Steven B.    schedule 19.06.2021
comment
@ СтивенБ. Спасибо, но не совсем. Я только что добавил пару опций, которые, кажется, работают, но я не знаю, являются ли они предпочтительными реализациями.   -  person Ryan Prentiss    schedule 19.06.2021

Ответы (1)


arrow_upward
1
arrow_downward

Следует избегать манипуляций с DOM, потому что Vue перезапишет эти изменения, если компонент необходимо повторно отрендерить.

Вместо этого вы можете использовать привязку класса. Это также устранило бы шаблон ref (modal), если бы он был предназначен только для изменения списка классов элемента:

<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>

Если ваш стиль для класса show устанавливает только CSS visibility, рассмотрите возможность использования директивы v-show. вместо этого:

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

... или v-if:

<div v-if="isShown"></div>
person tony19    schedule 19.06.2021