mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +03:00
doc content updates
This commit is contained in:
@@ -84,7 +84,7 @@ module.exports = {
|
||||
title: 'Digging Deeper',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['guide/templating', 'Templating & Slots'],
|
||||
['guide/templating', 'Templating'],
|
||||
['guide/vuex', 'Vuex'],
|
||||
['guide/ajax', 'AJAX'],
|
||||
],
|
||||
|
||||
+12
-8
@@ -1,6 +1,3 @@
|
||||
### Vue Compatibility
|
||||
- `vue 1.x` use `vue-select 1.x`
|
||||
|
||||
## Yarn / NPM
|
||||
Install with yarn:
|
||||
```bash
|
||||
@@ -17,7 +14,6 @@ Then, import and register the component:
|
||||
import Vue from 'vue'
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
// register component
|
||||
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";
|
||||
```
|
||||
|
||||
## 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
|
||||
<!-- include VueJS first -->
|
||||
<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>
|
||||
<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>
|
||||
<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" />
|
||||
|
||||
## 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
|
||||
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:
|
||||
|
||||
@@ -50,7 +51,7 @@ If you wanted to display `Canada` in the dropdown, you'd use the `countryName` k
|
||||
|
||||
## 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.
|
||||
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.
|
||||
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`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user