chore(docs): link to options prop details section (closes #4035) (#4036)

tmorehouse · jacobmllr95 · commit d236d9296364 · 2019-09-08T13:16:25.000+02:00
* chore(docs): link to options prop details section

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Prettify + correct typos
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,14 +10,14 @@
 
 Released: 2019-09-06
 
-> **BoootstrapVue 2.0.0 stable** introduces several new features and bug fixes. Please note that
-> this release also _includes several breaking changes_.
+> **BootstrapVue 2.0.0 stable** introduces several new features and bug fixes. Please note that this
+> release also _includes several breaking changes_.
 
 **Notable improvements:**
 
-- Tooltips and popovers have been competely re-written for better reactivity and stability. The
+- Tooltips and popovers have been completely re-written for better reactivity and stability. The
   directive versions are now reactive to trigger element `title` attribute changes and configuration
-  changes. The component versions now perform better when qucikly hovering/unhovering the trigger
+  changes. The component versions now perform better when quickly hovering/un-hovering the trigger
   element. Component and directive versions now have a default delay of `50`ms (affects `'hover'`
   and `'focus'` triggers only). They can now have a trigger of `'manual'` (when used by itself) of
   which they can only be opened or closed programmatically. Users can now optionally specify the ID
@@ -30,7 +30,7 @@ Released: 2019-09-06
   for targeting inner elements, just like with any other component).
 - New SVG background image based sorting indicator icons for `<b-table>`, with the ability to place
   them on either the right (default) or left of the table cell headers (via a new prop).
-- Programmatic selection of `<b-table>` selctable rows.
+- Programmatic selection of `<b-table>` selectable rows.
 - Ability to provide your own custom footer structure for `<b-table>` and `<b-table-lite>`.
 
 ### Breaking changes and deprecated features removal v2.0.0
@@ -108,8 +108,8 @@ examples, and below for a list of fixes and new features.
 
 ### Bug Fixes v2.0.0
 
-- **b-dropdown-\*:** ensure class bindings are placed on root element for all dropdown sub-components
-  (closes [#4022](https://github.com/bootstrap-vue/bootstrap-vue/issues/4022))
+- **b-dropdown-\*:** ensure class bindings are placed on root element for all dropdown
+  sub-components (closes [#4022](https://github.com/bootstrap-vue/bootstrap-vue/issues/4022))
   ([#4024](https://github.com/bootstrap-vue/bootstrap-vue/issues/4024))
   ([81efb89](https://github.com/bootstrap-vue/bootstrap-vue/commit/81efb89))
 - **b-form-textarea:** handle initial auto-height when in modal, tabs, or other component with
@@ -137,8 +137,7 @@ examples, and below for a list of fixes and new features.
   ([#3887](https://github.com/bootstrap-vue/bootstrap-vue/issues/3887))
   ([2302b31](https://github.com/bootstrap-vue/bootstrap-vue/commit/2302b31))
 - **b-table, b-table-lite:** generate `:key` for `row-details` row based on the `primary-key` field
-  value if available
-  ([#4025](https://github.com/bootstrap-vue/bootstrap-vue/issues/4025))
+  value if available ([#4025](https://github.com/bootstrap-vue/bootstrap-vue/issues/4025))
   ([c7cb16f](https://github.com/bootstrap-vue/bootstrap-vue/commit/c7cb16f))
 - **v-b-toggle:** don't override `role` if element has a `role` assigned
   ([#3889](https://github.com/bootstrap-vue/bootstrap-vue/issues/3889))
@@ -232,7 +231,7 @@ examples, and below for a list of fixes and new features.
   ([#3908](https://github.com/bootstrap-vue/bootstrap-vue/issues/3908))
   ([eebab43](https://github.com/bootstrap-vue/bootstrap-vue/commit/eebab43))
 
-### Depreaction removals v2.0.0
+### Deprecation removals v2.0.0
 
 - **b-dropdown:** remove deprecated slot `text`
   ([#3868](https://github.com/bootstrap-vue/bootstrap-vue/issues/3868))
diff --git a/src/components/form-checkbox/README.md b/src/components/form-checkbox/README.md
@@ -89,8 +89,8 @@ named slot `first`.
 
 ## Checkbox group options array
 
-Please see options in [`<b-form-select>`](/docs/components/form-select) docs for details on passing
-`options` (value array) to `<b-form-checkbox-group>`.
+Please see the [`<b-form-select>` `options` prop](/docs/components/form-select#options-property)
+docs for details on the formats and helper props associated with `options`.
 
 ## Inline and stacked checkboxes
 
diff --git a/src/components/form-radio/README.md b/src/components/form-radio/README.md
@@ -130,8 +130,8 @@ To have them appear _above_ the inputs generated by `options`, place them in the
 
 ## Radio group options array
 
-Please see options in [`<b-form-select>`](/docs/components/form-select) docs for details on passing
-options (value array) to `<b-form-radio-group>` via the `options` prop.
+Please see the [`<b-form-select>` `options` prop](/docs/components/form-select#options-property)
+docs for details on the formats and helper props associated with `options`.
 
 ## Radio value and v-model
 
diff --git a/src/components/form-select/README.md b/src/components/form-select/README.md
@@ -128,10 +128,7 @@ inline html (i.e. `<i>`, `<strong>`, etc) inside `<option>` elements of a `<sele
   user supplied string.
 </p>
 
-If you want to customize fields (for example using `name` field for display text) you can easily
-change them using `text-field`, `html-field`, `value-field`, and `disabled-field` props.
-
-### Array
+### Options as an array
 
 <!-- eslint-disable no-unused-vars -->
 
@@ -141,10 +138,10 @@ const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true },
 
 If an array entry is a string, it will be used for both the generated `value` and `text` fields.
 
-You can mix using strings and [objects](#objects) in the array.
+You can mix using strings and [objects](#options-as-an-array-of-objects) in the array.
 
 Internally, BootstrapVue will convert the above array to the following array (the
-[Array of Objects](#array-of-objects) format:
+[array of objects](#options-as-an-array-of-objects)) format:
 
 <!-- eslint-disable no-unused-vars -->
 
@@ -159,7 +156,7 @@ const options = [
 ]
 ```
 
-### Array of objects
+### Options as an array of objects
 
 <!-- eslint-disable no-unused-vars -->
 
@@ -177,7 +174,7 @@ If `value` is missing, then `text` will be used as both the `value` and `text` f
 the `html` property, you **must** supply a `value` property.
 
 Internally, BootstrapVue will convert the above array to the following array (the
-[Array of Objects](#array-of-objects) format:
+[array of objects](#options-as-an-array-of-objects)) format:
 
 <!-- eslint-disable no-unused-vars -->
 
@@ -187,12 +184,11 @@ const options = [
   { text: 'Item 2', value: 'second', disabled: false },
   { html: '<b>Item</b> 3', value: 'third', disabled: true },
   { text: 'Item 4', value: 'Item 4', disabled: false },
-  { text: 'Item 5', value: 'E', disabled: false },
-  { text: 'F', value: { foo: 'bar', baz: true }, disabled: false }
+  { text: 'Item 5', value: 'E', disabled: false }
 ]
 ```
 
-### Object
+### Options as an object
 
 Keys are mapped to `value` and values are mapped to option `text`.
 
@@ -209,7 +205,7 @@ const options = {
 ```
 
 Internally, BootstrapVue will convert the above object to the following array (the
-[Array of Objects](#array-of-objects) format:
+[array of objects](#options-as-an-array-of-objects)) format:
 
 <!-- eslint-disable no-unused-vars -->
 
@@ -219,12 +215,52 @@ const options = [
   { text: 'Item B', value: 'b', disabled: false },
   { html: 'Item C', value: 'c', disabled: false },
   { text: 'Item D', value: 'overridden_value', disabled: true },
-  { text: 'E', value: { foo: 'bar', baz: true }, disabled: false }
+  { text: 'Item E', value: { foo: 'bar', baz: true }, disabled: false }
 ]
 ```
 
-**Note:** When using the [Object](#object) format, the order of the final array is **not**
-guaranteed. For this reason, it is recommended to use the above array formats.
+**Note:** When using the Object format, the order of the final array is **not** guaranteed. For this
+reason, it is recommended to use either of the previously mentioned array formats.
+
+### Changing the option field names
+
+If you want to customize the field property names (for example using `name` field for display
+`text`) you can easily change them by setting the `text-field`, `html-field`, `value-field`, and
+`disabled-field` props to a string that contains the property name you would like to use:
+
+```html
+<template>
+  <div>
+    <b-form-select
+      v-model="selected"
+      :options="options"
+      class="mb-3"
+      value-field="item"
+      text-field="name"
+      disabled-field="notEnabled"
+    ></b-form-select>
+    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        selected: 'A',
+        options: [
+          { item: 'A', name: 'Option A' },
+          { item: 'B', name: 'Option B' },
+          { item: 'D', name: 'Option C', notEnabled: true },
+          { item: { d: 1 }, name: 'Option D' }
+        ]
+      }
+    }
+  }
+</script>
+
+<!-- b-form-select-options-fields.vue -->
+```
 
 ### Option notes
 
diff --git a/src/components/form/README.md b/src/components/form/README.md
@@ -324,8 +324,8 @@ export default {
 See also:
 
 - [`<b-form-input> datalist`](/docs/components/form-input#datalist-support) for datalist usage.
-- [`<b-form-select> options`](/docs/components/form-select#options-property) for more information on
-  the `options` array format.
+- [`<b-form-select>` `options` prop](/docs/components/form-select#options-property) docs for details
+  on the formats and helper props associated with `options`.
 
 ## Validation
 
