From b5e239c49c2b6c821cdbe384411709fbdace589a Mon Sep 17 00:00:00 2001 From: Jeff Date: Mon, 1 Apr 2019 14:42:21 -0700 Subject: [PATCH] doc content updates --- docs/.vuepress/config.js | 2 +- docs/guide/install.md | 20 ++++++++++++-------- docs/guide/options.md | 11 ++++++++--- docs/guide/values.md | 2 +- 4 files changed, 22 insertions(+), 13 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 2dc7e65..f2da0d2 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -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'], ], diff --git a/docs/guide/install.md b/docs/guide/install.md index 042dea1..c4b7143 100644 --- a/docs/guide/install.md +++ b/docs/guide/install.md @@ -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 - + - + + ``` @@ -55,3 +54,8 @@ Vue.component('v-select', VueSelect.VueSelect); ``` + +## 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. diff --git a/docs/guide/options.md b/docs/guide/options.md index da8607e..68992fb 100644 --- a/docs/guide/options.md +++ b/docs/guide/options.md @@ -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. - +```html + +``` + + diff --git a/docs/guide/values.md b/docs/guide/values.md index 9b67134..110e392 100644 --- a/docs/guide/values.md +++ b/docs/guide/values.md @@ -1,4 +1,4 @@ -## Getting / Setting +## Getting and Setting ### `v-model`