API 浏览器
useId 组合
Quasar v2.15+

useId() 可组合项返回一个 Vue Ref,其中包含一个字符串,该字符串可用作唯一标识符,并应用于 DOM 节点属性。

¥The useId() composable returns a Vue Ref holding a string that can be used as a unique identifier to apply to a DOM node attribute.

如果你提供一个函数(下面输入的 getValue)来获取 id 可能具有的值,它将确保保持更新。

¥Should you supply a function (getValue from the typing below) to get the value that the id might have, it will make sure to keep it updated.

在服务器端渲染 (SSR) 中,它会考虑水合 (hydration) 过程,以便你的组件不会生成任何此类错误。

¥On SSR, it takes into account the process of hydration so that your component won’t generate any such errors.

语法(Syntax)

¥Syntax

import { useId } from 'quasar'

setup () {
  const id = useId()
  // ...
}
function useId(
  opts?: {
    getValue?: () => string | null | undefined;
    required?: boolean; // default: true
  }
): Ref<string | null>;

示例(Example)

¥Example

<template>
  <div :id="id">
    Some component
  </div>
</template>

<script>
import { useId } from 'quasar'

export default {
  props: {
    for: String
  },

  setup () {
    const id = useId({
      getValue: () => props.for,
      required: true
    })

    return { id }
  }
}
</script>