Skip to content

Commit b34bf57

Browse files
sagalbotsagalbot
authored
Remove foo bar (sagalbot#826)
* remove foo bar examples, move tagging to values * update tagline, add headers to values * hunting down more foos
1 parent 01ecee9 commit b34bf57

File tree

4 files changed

+48
-32
lines changed

4 files changed

+48
-32
lines changed

‎docs/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
![Maintainability Score](https://img.shields.io/codeclimate/maintainability/sagalbot/vue-select.svg?style=flat-square)
88
![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square)
99

10-
> Everything you wish the native `<select>` element could do, wrapped
10+
> Everything you wish the HTML `<select>` element could do, wrapped
1111
up into a zero dependency, highly extensible Vue component.
1212

1313
Vue Select is a feature rich select/dropdown/typeahead component. It provides a default
1414
template that fits the 80% use case for a select dropdown. Here it is by default:
1515

16-
<div style="max-width:50%; margin: 0 auto; padding: 1rem 0;">
17-
<v-select :options="['Option One','Option Two','Option Three']" />
16+
<div style="max-width:25rem; margin: 0 auto; padding: 1rem 0;">
17+
<country-select />
1818
</div>
1919

2020
If you want to get a quick sense of what vue-select can do, check out

‎docs/api/props.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ value: {
1414

1515
An array of strings or objects to be used as dropdown choices.
1616
If you are using an array of objects, vue-select will look for
17-
a `label` key (ex. `[{label: 'This is Foo', value: 'foo'}]`). A
17+
a `label` key (ex. `[{label: 'Canada', value: 'CA'}]`). A
1818
custom label key can be set with the `label` prop.
1919

2020
```js

‎docs/guide/options.md

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44

55
```html
66
<!-- array of strings or numbers -->
7-
<v-select :options="['foo','bar']"></v-select>
7+
<v-select :options="['Canada', 'United States']"></v-select>
88
```
99

10-
<v-select :options="['foo','bar']"></v-select>
10+
<v-select :options="['Canada', 'United States']"></v-select>
1111

1212
```html
1313
<!-- or, an array of objects -->
14-
<v-select :options="[{label: 'foo', value: 'Foo'}]"></v-select>
14+
<v-select :options="[{label: 'Canada', code: 'ca'}]"></v-select>
1515
```
1616

17-
<v-select :options="[{label: 'foo', value: 'Foo'}]"></v-select>
17+
<v-select :options="[{label: 'Canada', code: 'ca'}]"></v-select>
1818

1919
## Option Labels
2020

@@ -52,14 +52,3 @@ If you wanted to display `Canada` in the dropdown, you'd use the `countryName` k
5252
`vue-select` requires the `options` prop to be an `array`. If you are using Vue in development
5353
mode, you will get warnings attempting to pass anything other than an `array` to the `options` prop.
5454
If you need a `null`/`empty` value, use an empty array `[]`.
55-
56-
## Tagging
57-
58-
To allow input that's not present within the options, set the `taggable` prop to true.
59-
If you want new tags to be pushed to the options list, set `push-tags` to true.
60-
61-
```html
62-
<v-select taggable multiple push-tags />
63-
```
64-
65-
<v-select taggable multiple push-tags />

‎docs/guide/values.md

Lines changed: 40 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -60,48 +60,75 @@ methods: {
6060
```
6161
## Transforming Selections
6262

63-
When the `options` array contains objects, vue-select returns the whole object as dropdown value upon selection.
63+
When the `options` array contains objects, vue-select returns the whole object as dropdown value
64+
upon selection. This approach makes no assumptions about the data you need, and provides a lot of
65+
flexibility. However, there will be situations where maybe you just need to return a single key
66+
from an object.
6467

65-
If you need to return a single key, or transform the data before it is synced, vue-select provides a `reduce` callback
66-
that allows you to transform a selected option before it is passed to the `@input` event. Consider this data structure:
68+
### Returning a single key with `reduce`
69+
70+
If you need to return a single key, or transform the selection before it is synced, vue-select
71+
provides a `reduce` callback that allows you to transform a selected option before it is passed to
72+
the `@input` event. Consider this data structure:
6773

6874
```js
69-
let options = [{code: 'CA', country: 'Canada'}, ...];
75+
let options = [{code: 'CA', country: 'Canada'}];
7076
```
7177

72-
If we want to display the `country`, but return the `code` to `v-model`, we can use the `reduce` prop to receive
73-
only the data that's required.
78+
If we want to display the `country`, but return the `code` to `v-model`, we can use the `reduce`
79+
prop to receive only the data that's required.
7480

7581
```html
7682
<v-select :options="options" :reduce="country => country.code" label="country" />
7783
```
84+
85+
### Deep Nested Values
7886

7987
The `reduce` property also works well when you have a deeply nested value:
8088

8189
```
8290
{
8391
country: 'canada',
8492
meta: {
85-
id: '1',
8693
code: 'ca'
94+
provinces: [...],
8795
}
8896
}
8997
```
9098

9199
```html
92-
<v-select :options="options" :reduce="country => country.value.id" label="country" />
100+
<v-select :options="options" :reduce="country => country.meta.code" label="country" />
93101
```
94102

95103
<reducer-nested-value />
96104

97105
## Single/Multiple Selection
98106

99-
By default, vue-select supports choosing a single value. If you need multiple values, use the `multiple` boolean prop,
100-
much the same way you would on a native `<select>` element. When `multiple` is true, `v-model` or `value` should be
101-
arrays.
107+
By default, vue-select supports choosing a single value. If you need multiple values, use the
108+
`multiple` boolean prop, much the same way you would on an HTML `<select>` element. When `multiple`
109+
is true, `v-model` and `value` must be an array.
102110

103111

104112
```html
105-
<v-select multiple v-model="selected" :options="['foo','bar']" />
113+
<v-select multiple v-model="selected" :options="['Canada','United States']" />
114+
```
115+
<v-select multiple :options="['Canada','United States']" />
116+
117+
## Tagging
118+
119+
To allow input that's not present within the options, set the `taggable` prop to true.
120+
121+
```html
122+
<v-select taggable multiple />
106123
```
107-
<v-select multiple :options="['foo','bar']" />
124+
125+
<v-select taggable multiple />
126+
127+
If you want added tags to be pushed to the options array, set `push-tags` to true.
128+
129+
```html
130+
<v-select taggable multiple />
131+
```
132+
133+
<v-select taggable multiple push-tags />
134+

0 commit comments

Comments
 (0)