webfansplz / vuejs-challenges

Collection of Vue.js challenges
https://vuejs-challenges.netlify.app/
MIT License
2.7k stars 188 forks source link

15 - useToggle #2695

Open LauGM opened 4 months ago

LauGM commented 4 months ago
<script setup lang='ts'>
import { ref } from 'vue';
/**
 * Implement a composable function that toggles the state
 * Make the function work correctly
*/
function useToggle(val) {
  const state = ref(val);

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