On this page

Record field

The record field stores a relationship to a record in a specific collection.

Examples

Here's an example of using the record field in a block:

# blocks/Article.vue

<template>
  <div>
    <span>Author: {{ author?.firstName }} {{ author?.lastName }}</span>
    ...
  </div>
</template>

<script lang="ts" setup>
import { recordField } from '#pruvious'

defineProps({
  author: recordField({
    collection: 'users',
    fields: { firstName: true, lastName: true },
    required: true,
    placeholder: 'Select an author',
  }),
})
</script>

Here is another example of how to use it in a collection definition:

# collections/posts.ts

import { defineCollection } from '#pruvious'

export default defineCollection({
  name: 'posts',
  mode: 'multi',
  fields: {
    author: {
      type: 'record',
      options: {
        collection: 'users',
        fields: { firstName: true, lastName: true, email: true },
        required: true,
        placeholder: 'Select an author',
      },
    },
    // ...
  },
})

Options

You can specify the following options in the record field (required fields are marked with the symbol R):

Option	Description
`clearable`	A boolean indicating whether to display a clear button that removes the current input value.
`collection` R	The name of the multi-entry collection from which to retrieve a record.
`default`	The default field value (`null` if not defined).
`description`	A brief descriptive text displayed in code comments and in a tooltip at the upper right corner of the field.
`details`	An array of field names from the selected collection to display below the select input for the selected record.
`fields`	The fields of the selected collection to be returned when this field's value is populated. Defaults to `{ id: true }`.
`label`	The field label displayed in the UI. By default, it is automatically generated based on the property name assigned to the field. For example, parentPage becomes Parent page.
`name`	A string that specifies the `name` for the input control. If not specified, the `name` attribute will be automatically generated.
`placeholder`	Text that appears in the input element when it has no value set.
`populate`	Specifies whether to populate the fields of the selected collection. Exercise caution when using this option, as it may trigger infinite loops during population if the related collection fields depend on additional population loops. Defaults to `false`.
`recordLabel`	The collection field or fields used as the record label. When using multiple fields, the first field is used as the main label, and the second field is displayed only in search results. By default, the fields from the `dashboard.primaryField` and `dashboard.overviewTable.searchLabel` options of the selected collection are used.
`required`	Specifies that the field input is mandatory during creation.
`visibleChoices`	The number of visible choices in the dropdown list (must be less than 30).

Last updated on January 9, 2024 at 11:57

Range

Records