Ag Select

vue3 select component

Primitive model example

You can output a primitive value while your list is still with key and values as in the example below:

TypeScript×
  • VueJS
  • ReactJS
  • Angular
  • JavaScript
  • Go
  • Java
  • Python
  • ASP.NET
  • C#
  • Perl
  • Swift
  • TypeScript
  • PHP
  • Kotlin
  • Ruby
  • Rust
Model Value : 12

Object model example

If you need both key and value as an object binded to the component check this example:

VueJS×
  • VueJS
  • ReactJS
  • Angular
  • JavaScript
  • Go
  • Java
  • Python
  • ASP.NET
  • C#
  • Perl
  • Swift
  • TypeScript
  • PHP
  • Kotlin
  • Ruby
  • Rust
Model Value : { "value": 1, "text": "VueJS" }

Select with search

Search functionality is optional you can enable it by just adding search attribute, see example below:

Angular×
  • VueJS
  • ReactJS
  • Angular
  • JavaScript
  • Go
  • Java
  • Python
  • ASP.NET
  • C#
  • Perl
  • Swift
  • TypeScript
  • PHP
  • Kotlin
  • Ruby
  • Rust
Model Value : { "value": 3, "text": "Angular" }

Select from array of strings

You can populate the select list with array of primitives instead of objects, your model output will be primitive automatically.

Select Friend
  • Ross
  • Rachel
  • Chandler
  • Monica
  • Joey
  • Phoebe
Model Value :

Select With Custom Template

you can use option slot to customize the select item with your own template, see the example:

Select Language
  • 1
    VueJS
  • 2
    ReactJS
  • 3
    Angular
  • 4
    JavaScript
  • 5
    Go
  • 6
    Java
  • 7
    Python
  • 8
    ASP.NET
  • 9
    C#
  • 10
    Perl
  • 11
    Swift
  • 12
    TypeScript
  • 13
    PHP
  • 14
    Kotlin
  • 15
    Ruby
  • 16
    Rust
Model Value :