useToggle

カテゴリ

ユーティリティ

エクスポートサイズ

200 B

最終更新日

先週

ユーティリティ関数付きのブール型スイッチ。

デモ

ソース

値: OFF

使用方法

import { useToggle } from '@vueuse/core'

const [value, toggle] = useToggle()

refを渡すと、useToggleは単純な切り替え関数のみを返します。

import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)

注: 切り替え関数は最初の引数を上書き値として受け取ることに注意してください。イベントオブジェクトが渡されるため、テンプレート内のイベントに直接関数を渡すことは避けた方が良いでしょう。

html

<!-- caution: $event will be pass in -->
<button @click="toggleDark" />
<!-- recommended to do this -->
<button @click="toggleDark()" />

型宣言

typescript

export interface UseToggleOptions<Truthy, Falsy> {
  truthyValue?: MaybeRefOrGetter<Truthy>
  falsyValue?: MaybeRefOrGetter<Falsy>
}
export declare function useToggle<Truthy, Falsy, T = Truthy | Falsy>(
  initialValue: Ref<T>,
  options?: UseToggleOptions<Truthy, Falsy>,
): (value?: T) => T
export declare function useToggle<
  Truthy = true,
  Falsy = false,
  T = Truthy | Falsy,
>(
  initialValue?: T,
  options?: UseToggleOptions<Truthy, Falsy>,
): [Ref<T>, (value?: T) => T]