useSplitAttrs composable | Quasar Framework

Vue’s attrs in a component can contain both listeners and real HTML attributes. The useSplitAttrs() composable breaks down this Vue attr object into the two categories and keeps them updated.

Syntax

import { useSplitAttrs } from 'quasar'

setup () {
  const {
    attributes,
    listeners
  } = useSplitAttrs()

  // ...
}

import { Ref } from 'vue'

function useSplitAttrs(): {
  attributes: Ref<Record<string, unknown>>;
  listeners: Ref<
    Record<
      string,
      ((...args: any[]) => any) | ((...args: any[]) => any)[]
    >
  >;
};

Example

import { useSplitAttrs } from 'quasar'

setup () {
  const {
    attributes, // is a Vue ref()
    listeners // is a Vue ref()
  } = useSplitAttrs()

  console.log(attributes.value)
  // prints out a key-value object

  console.log(listeners.value)
  // prints out a key-value object

  // ...
}

Caught a mistake?Edit this page in browser

1. Introduction

2. Syntax

3. Example