[Vuejs]-How to write an Event in Composition API (Vue3)?

by

2👍

✅

Try like this (in composition API you use ref or reactive instead data function, and you return your functions/reactive data):

<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>
👤Nikola Pavicevic

1👍

Also, it will work with a little less code:

<template>
  <div @click="isActive = !isActive"> ... </div>
</template>

<script setup>
import { ref } from "vue";
const isActive = ref(true)
</script>

you can read here about the <script setup>

👤wittgenstein

Leave a comment