select

Wrapper for v-select that fetch data from an API

Usage

Simple usage

Composition Api

<script setup>

const onlyId = ref(null),
const wholeObject = ref(null),
const multiple: ref([]),
const paginate = ref(null)

</script>

<template>
  <!-- simple usage -->
  <we-select
    v-model="onlyId"
    label="Province"
    resource="provinces"
  />

  <!-- return object -->
  <we-select
    v-model="wholeObject"
    label="Province"
    resource="provinces"
    return-object
  />

  <!-- multiple -->
  <we-select
    v-model="multiple"
    label="Province"
    resource="provinces"
    multiple
  />

  <!-- paginate (use when you have a lot of resources) -->
  <we-select
    v-model="paginate"
    label="Province"
    resource="provinces"
    paginate
  />

</template>

Legacy

<template>
  <!-- simple usage -->
  <we-select
    v-model="onlyId"
    label="Province"
    resource="provinces"
  />

  <!-- return object -->
  <we-select
    v-model="wholeObject"
    label="Province"
    resource="provinces"
    return-object
  />

  <!-- multiple -->
  <we-select
    v-model="multiple"
    label="Province"
    resource="provinces"
    multiple
  />

  <!-- paginate (use when you have a lot of resources) -->
  <we-select
    v-model="paginate"
    label="Province"
    resource="provinces"
    paginate
  />

</template>

<script>
export default {
  data: () => ({
    onlyId: null,
    wholeObject: null,
    multiple: [],
    paginate: null
  })
};

</script>

Props

Name	Type	Default	Description
resource	String	required	Resource name to fetch data from
extraParams	Object	{}	Extra params to send to the API
model-value	any	undefined	Model value of the select
return-object	Boolean	false	Return the whole object instead of the item-value
item-value	String	id	Key of the object to use as value
item-text	[String, Function]	name	Key or Function of the object to use as text
clearable	Boolean	true	Show clear button
paginate	[Boolean, Object]	false	Enable pagination
multiple	Boolean	false	Enable multiple
search-as-item	Boolean	false	If true allows the user to select the search query they typed
lazy	Boolean	false	If true indicates whether the component should defer loading data until a specific trigger occurs

WARNING

• when you use paginate, return-object is set to true automatically
• when you use return-object, value must be an object or an array of objects