2
0
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:
Jeff
2019-04-01 14:42:21 -07:00
parent db43a67801
commit b5e239c49c
4 changed files with 22 additions and 13 deletions
+12 -8
View File
@@ -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.
+8 -3
View File
@@ -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 -1
View File
@@ -1,4 +1,4 @@
## Getting / Setting
## Getting and Setting
### `v-model`