mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-19 09:50:33 +03:00
doc content updates
This commit is contained in:
@@ -84,7 +84,7 @@ module.exports = {
|
|||||||
title: 'Digging Deeper',
|
title: 'Digging Deeper',
|
||||||
collapsable: false,
|
collapsable: false,
|
||||||
children: [
|
children: [
|
||||||
['guide/templating', 'Templating & Slots'],
|
['guide/templating', 'Templating'],
|
||||||
['guide/vuex', 'Vuex'],
|
['guide/vuex', 'Vuex'],
|
||||||
['guide/ajax', 'AJAX'],
|
['guide/ajax', 'AJAX'],
|
||||||
],
|
],
|
||||||
|
|||||||
+12
-8
@@ -1,6 +1,3 @@
|
|||||||
### Vue Compatibility
|
|
||||||
- `vue 1.x` use `vue-select 1.x`
|
|
||||||
|
|
||||||
## Yarn / NPM
|
## Yarn / NPM
|
||||||
Install with yarn:
|
Install with yarn:
|
||||||
```bash
|
```bash
|
||||||
@@ -17,7 +14,6 @@ Then, import and register the component:
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import vSelect from 'vue-select'
|
import vSelect from 'vue-select'
|
||||||
|
|
||||||
// register component
|
|
||||||
Vue.component('v-select', vSelect)
|
Vue.component('v-select', vSelect)
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -33,18 +29,21 @@ You can also import the scss yourself for complete control of the component styl
|
|||||||
@import "vue-select/src/scss/vue-select.scss";
|
@import "vue-select/src/scss/vue-select.scss";
|
||||||
```
|
```
|
||||||
|
|
||||||
## In the Browser / CDN
|
## In the Browser
|
||||||
|
|
||||||
Include `vue` & `vue-select.js` - I recommend using [unpkg.com](https://unpkg.com/#/).
|
vue-select ships as an UMD module that is accessible in the browser. When loaded
|
||||||
|
in the browser, you can access the component through the `VueSelect.VueSelect`
|
||||||
|
global variable. You'll need to load Vue.js, vue-select JS & vue-select CSS.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- include VueJS first -->
|
<!-- include VueJS first -->
|
||||||
<script src="https://unpkg.com/vue@latest"></script>
|
<script src="https://unpkg.com/vue@latest"></script>
|
||||||
|
|
||||||
<!-- use the latest release -->
|
<!-- use the latest vue-select release -->
|
||||||
<script src="https://unpkg.com/vue-select@latest"></script>
|
<script src="https://unpkg.com/vue-select@latest"></script>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
|
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
|
||||||
<!-- or point to a specific release -->
|
|
||||||
|
<!-- or point to a specific vue-select release -->
|
||||||
<script src="https://unpkg.com/vue-select@2.6.0"></script>
|
<script src="https://unpkg.com/vue-select@2.6.0"></script>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/vue-select@2.6.0/dist/vue-select.css">
|
<link rel="stylesheet" href="https://unpkg.com/vue-select@2.6.0/dist/vue-select.css">
|
||||||
```
|
```
|
||||||
@@ -55,3 +54,8 @@ Vue.component('v-select', VueSelect.VueSelect);
|
|||||||
```
|
```
|
||||||
|
|
||||||
<CodePen url="dJjzeP" />
|
<CodePen url="dJjzeP" />
|
||||||
|
|
||||||
|
## Vue Compatibility
|
||||||
|
|
||||||
|
If you're on Vue `1.x`, use vue-select `1.x`. The `1.x` branch has not received updates
|
||||||
|
since the 2.0 release.
|
||||||
|
|||||||
@@ -29,7 +29,8 @@ component. No further configuration is necessary.
|
|||||||
|
|
||||||
When `options` is an array of objects, the component must generate a label to be shown as the
|
When `options` is an array of objects, the component must generate a label to be shown as the
|
||||||
options text. By default, `vue-select` will attempt to render `option.label` as the option label.
|
options text. By default, `vue-select` will attempt to render `option.label` as the option label.
|
||||||
You can set your own label to match your source data using the `label` prop.
|
You might not have a `label` key in your objects, so you can set your own label to match your
|
||||||
|
source data using the `label {String}` prop.
|
||||||
|
|
||||||
For example, consider an object with `countryCode` and `countryName` properties:
|
For example, consider an object with `countryCode` and `countryName` properties:
|
||||||
|
|
||||||
@@ -50,7 +51,7 @@ If you wanted to display `Canada` in the dropdown, you'd use the `countryName` k
|
|||||||
|
|
||||||
## Null / Empty Options
|
## Null / Empty Options
|
||||||
|
|
||||||
`vue-select` requires the `option` property to be an `array`. If you are using Vue in development
|
`vue-select` requires the `options` prop to be an `array`. If you are using Vue in development
|
||||||
mode, you will get warnings attempting to pass anything other than an `array` to the `options` prop.
|
mode, you will get warnings attempting to pass anything other than an `array` to the `options` prop.
|
||||||
If you need a `null`/`empty` value, use an empty array `[]`.
|
If you need a `null`/`empty` value, use an empty array `[]`.
|
||||||
|
|
||||||
@@ -59,4 +60,8 @@ If you need a `null`/`empty` value, use an empty array `[]`.
|
|||||||
To allow input that's not present within the options, set the `taggable` prop to true.
|
To allow input that's not present within the options, set the `taggable` prop to true.
|
||||||
If you want new tags to be pushed to the options list, set `push-tags` to true.
|
If you want new tags to be pushed to the options list, set `push-tags` to true.
|
||||||
|
|
||||||
<v-select taggable />
|
```html
|
||||||
|
<v-select taggable multiple push-tags />
|
||||||
|
```
|
||||||
|
|
||||||
|
<v-select taggable multiple push-tags />
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
## Getting / Setting
|
## Getting and Setting
|
||||||
|
|
||||||
### `v-model`
|
### `v-model`
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user