Actualmente estoy teniendo este evento en un vue3 component :
<template> <div class="hamburger-toggle" @click="toggle" :class="{ nav__open: isActive }"> </template> <script> export default { name: "navbar", data() { return { isActive: true } }, methods: { toggle: function () { this.isActive = !this.isActive; } } } </script> ¿Cómo escribiría esto en la composition api ?
Intento fallido:
<script> export default { props: { isActive: false }, setup(props) { function toggle(props) { props.isActive = !props.isActive; } } } </script>Intente así (en la API de composición, usa la función de referencia o reactiva en lugar de datos, y devuelve sus funciones/datos reactivos):
<template> <div class="hamburger-toggle" @click="toggle" :class="{ nav__open: isActive }"> </template> <script> import { ref } from "@vue/reactivity"; export default { name: "navbar", setup() { const isActive = ref(true) const toggle = () => { isActive.value = !isActive.value } return { isActive, toggle } } </script>Además, funcionará con un poco menos de código:
<template> <div @click="isActive = !isActive"> ... </div> </template> <script setup> import { ref } from "vue"; const isActive = ref(true) </script> puede leer aquí sobre la <script setup>