@@ -89,8 +89,124 @@ named slot `first`.
89 89 90 90
## Checkbox group options array
91 91 92 -
Please see the [`<b-form-select>` `options` prop](/docs/components/form-select#options-property)
93 -
docs for details on the formats and helper props associated with `options`.
92 +
`options` can be an array of strings or objects. Available fields:
93 + 94 +
- **`value`** The selected value which will be set on `v-model`
95 +
- **`disabled`** Disables item for selection
96 +
- **`text`** Display text, or **`html`** Display basic inline html
97 + 98 +
`value` can be a string, number, or simple object. Avoid using complex types in values.
99 + 100 +
If both `html` and `text` are provided, `html` will take precedence. Only basic/native HTML is
101 +
supported in the `html` field (components will not work). Note that not all browsers will render
102 +
inline html (i.e. `<i>`, `<strong>`, etc) inside `<option>` elements of a `<select>`.
103 + 104 +
<p class="alert alert-danger">
105 +
<strong>Be cautious</strong> of placing user supplied content in the <code>html</code> field,
106 +
as it may make you vulnerable to
107 +
<a class="alert-link" href="https://en.wikipedia.org/wiki/Cross-site_scripting">
108 +
<abbr title="Cross Site Scripting Attacks">XSS attacks</abbr></a>, if you do not first
109 +
<a class="alert-link" href="https://en.wikipedia.org/wiki/HTML_sanitization">sanitize</a> the
110 +
user supplied string.
111 +
</p>
112 + 113 +
<!-- eslint-disable no-unused-vars -->
114 + 115 +
```js
116 +
const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true }, 'E', 'F']
117 +
```
118 + 119 +
If an array entry is a string, it will be used for both the generated `value` and `text` fields.
120 + 121 +
You can mix using strings and [objects](#options-as-an-array-of-objects) in the array.
122 + 123 +
Internally, BootstrapVue will convert the above array to the following array (the
124 +
[array of objects](#options-as-an-array-of-objects)) format:
125 + 126 +
<!-- eslint-disable no-unused-vars -->
127 + 128 +
```js
129 +
const options = [
130 +
{ text: 'A', value: 'A', disabled: false },
131 +
{ text: 'B', value: 'B', disabled: false },
132 +
{ text: 'C', value: 'C', disabled: false },
133 +
{ text: 'D', value: { d: 1 }, disabled: true },
134 +
{ text: 'E', value: 'E', disabled: false },
135 +
{ text: 'F', value: 'F', disabled: false }
136 +
]
137 +
```
138 + 139 +
### Options as an array of objects
140 + 141 +
<!-- eslint-disable no-unused-vars -->
142 + 143 +
```js
144 +
const options = [
145 +
{ text: 'Item 1', value: 'first' },
146 +
{ text: 'Item 2', value: 'second' },
147 +
{ html: '<b>Item</b> 3', value: 'third', disabled: true },
148 +
{ text: 'Item 4' },
149 +
{ text: 'Item 5', value: { foo: 'bar', baz: true } }
150 +
]
151 +
```
152 + 153 +
If `value` is missing, then `text` will be used as both the `value` and `text` fields. If you use
154 +
the `html` property, you **must** supply a `value` property.
155 + 156 +
Internally, BootstrapVue will convert the above array to the following array (the
157 +
[array of objects](#options-as-an-array-of-objects)) format:
158 + 159 +
<!-- eslint-disable no-unused-vars -->
160 + 161 +
```js
162 +
const options = [
163 +
{ text: 'Item 1', value: 'first', disabled: false },
164 +
{ text: 'Item 2', value: 'second', disabled: false },
165 +
{ html: '<b>Item</b> 3', value: 'third', disabled: true },
166 +
{ text: 'Item 4', value: 'Item 4', disabled: false },
167 +
{ text: 'Item 5', value: 'E', disabled: false }
168 +
]
169 +
```
170 + 171 +
### Changing the option field names
172 + 173 +
If you want to customize the field property names (for example using `name` field for display
174 +
`text`) you can easily change them by setting the `text-field`, `html-field`, `value-field`, and
175 +
`disabled-field` props to a string that contains the property name you would like to use:
176 + 177 +
```html
178 +
<template>
179 +
<div>
180 +
<b-form-checkbox-group
181 +
v-model="selected"
182 +
:options="options"
183 +
class="mb-3"
184 +
value-field="item"
185 +
text-field="name"
186 +
disabled-field="notEnabled"
187 +
></b-form-checkbox-group>
188 +
<div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
189 +
</div>
190 +
</template>
191 + 192 +
<script>
193 +
export default {
194 +
data() {
195 +
return {
196 +
selected: [],
197 +
options: [
198 +
{ item: 'A', name: 'Option A' },
199 +
{ item: 'B', name: 'Option B' },
200 +
{ item: 'D', name: 'Option C', notEnabled: true },
201 +
{ item: { d: 1 }, name: 'Option D' }
202 +
]
203 +
}
204 +
}
205 +
}
206 +
</script>
207 + 208 +
<!-- b-form-checkbox-group-options-fields.vue -->
209 +
```
94 210 95 211
## Inline and stacked checkboxes
96 212 RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4