Input #

<template>
  <div style="display: flex; flex-direction: column; gap: 5px">
    <v-select
      v-for="(val, key) in features"
      v-bind="{ [key]: val }"
      :key="key"
      :options="options"
      :placeholder="`${key} select`"
    />
  </div>
</template>

<script setup lang="ts">
const options = ['mini', 'compact', 'default', 'large'];

const features = {
  error: true,
  positive: true,
  disabled: true,
  readonly: true,
  clearable: true,
  loading: true,
  autoFocus: true,
  searchable: true,
};
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 5px">
    <v-select v-for="val in options" :key="val" :size="val" :value="val" :options="options" />
  </div>
</template>

<script setup>
const options = ['mini', 'compact', 'default', 'large'];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 5px">
    <v-select size="default" type="select" :options="options" />
    <v-select size="default" type="search" :options="options" />
  </div>
</template>

<script setup lang="ts">
const options = ['mini', 'compact', 'default', 'large'];
</script>

<template>
  <v-select @input="val => (value = val)" />
  <p>value: {{ value }}</p>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('');
</script>

<template>
  <v-select @change="val => (value = val)" :options="options" />
  <p>value: {{ value }}</p>
</template>
<script setup>
import { ref } from 'vue';
const options = ['mini', 'compact', 'default', 'large'];
const value = ref('');
</script>

<template>
  <v-select @blur="num++" />
  <p>Blur Times: {{ num }}</p>
</template>
<script setup>
import { ref } from 'vue';
const num = ref(0);
</script>

<template>
  <v-select @focus="num++" />
  <p>Focus Times: {{ num }}</p>
</template>
<script setup>
import { ref } from 'vue';
const num = ref(0);
</script>

<template>
  <v-select @clear="num++" clearable />
  <p>Clear Times: {{ num }}</p>
</template>
<script setup>
import { ref } from 'vue';
const num = ref(0);
</script>

<template>
  <v-select v-model="value" />
  <p>v-model: {{ value }}</p>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('default');
</script>