Skip to main content

options

Description​

Optional. Specifies a set of data items that will be used as rich select options

Usage​

options?: { id: string | number; label: string }[];

Parameters​

  • id - (required) an id of an option
  • label - (required) the name of an option

Example​

<script setup>
  const dataset = [
    {id:1, label:"First option"},
    {id:2, label:"Second option"},
    {id:3, label:"Third option"}
  ]
</script>

<template>
  <RichSelect :options="dataset" :value="1" />
</template>

Details​

It is also possible to put data in a separate file and specify the name of the data set as a value of the options property of RichSelect:

userlist.js
export const users = [
  {id:1, label:"name1"},
  {id:2, label:"name2"}
]
App.vue
<script setup>
  import { RichSelect } from "@svar-ui/vue-core";
  import { users } from "../your_data/userlist";
</script>

<template>
  <RichSelect :options="users" :value="1"/>
</template>

Related article: Loading options

Related sample: RichSelect