select

Wrapper for v-select that fetch data from an API

Usage

Simple usage

<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
value	any	undefined	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

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