Как исправить ошибку TypeError: Cannot create property 'value' on boolean 'false'?

Question

[D1ma5ta]

Когда я пытаюсь отобразить диалоговое окно, я получаю ошибку: ТTypeError: Cannot create property 'value' on boolean 'false'.
Я объявляю переменную isOpen в компоненте:
const isLibraryOpen = ref(false)
Код кнопки открывающей модальное окно:

<MyButton @click="popupOpened(isLibraryOpen)">Библиотека игр</MyButton>

function popupOpened(popupRef) {
  popupRef.value = true
}

<Modal v-if="isLibraryOpen">
      <GameLibrary :selectedGames="selectedGames" @update-selected-games="updateSelectedGames" />
    </Modal>

Answer 1

[Aetae]

Это так не работает. В шаблоне у тебя все рефы раскрыты -это шаблон, он должен быть простым.

Делать надо либо так:

function popupLibraryOpen() {
  isLibraryOpen.value = true
}
<MyButton @click="popupLibraryOpen">Библиотека игр</MyButton>

либо так:

<MyButton @click="isLibraryOpen = true">Библиотека игр</MyButton>

Comments

[D1ma5ta]

А можно как-то эту функцию сделать универсальной, что бы она отвечала за открытие всех модальных окон?

[Aetae]

D1ma5ta, а зачем? Не переусложняй.

Можно вот так например:

const modals = reactive({
  library: false,
  bar: false
})

function popupOpen(type) {
  modals[type] = true
}

<MyButton @click="popupOpen('library')">Библиотека игр</MyButton>

Только всё равно проще и наглядней будет просто, баз лишних телодвижений:

<MyButton @click="modals.library = true">Библиотека игр</MyButton>