15 - useToggle

[oreo2990]

// your answers
<script setup lang='ts'>
import {ref} from "vue"

/**
 * Implement a composable function that toggles the state
 * Make the function work correctly
*/
function useToggle(isOpen:boolean) {
  const state = ref(isOpen)
  const toggle = ()=>{
    state.value = !state.value
  }

  return {state,toggle}

}

const {state, toggle }= useToggle(false)

</script>

<template>
  <p>State: {{ state ? 'ON' : 'OFF' }}</p>
  <p @click="toggle">
    Toggle state
  </p>
</template>