You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: component/events.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,13 +19,13 @@ You can listen for this by attaching to the `@validated` (`v-validated`) event o
19
19
20
20
## model-updated
21
21
22
-
This event is triggered whenever the the model attached to the form has been updated, usually due to user interaction. It provides the new value and a reference to the field schema for the field which was just updated. This event is triggered each time a field is updated.
22
+
This event is triggered whenever the the model attached to the form has been updated, usually due to user interaction. It provides the new value and a reference to the property name for the field which was just updated. This event is triggered each time a field is updated.
23
23
24
24
Internally, the event is triggered with
25
25
```js
26
26
this.$emit("model-updated", newVal, schema);
27
27
```
28
28
29
-
`newVal` is the value that was just updated, and `schema` is a reference to the individual [field schema](schema.md). `schema` will only contain the individual field data, and not the full schema. This allows you to identify which field was just updated.
29
+
`newVal` is the value that was just updated, and `schema` is a reference to the model's property name found in the [field schema](schema.md). `schema` will only contain the individual property name, and not the full schema. This allows you to identify which field was just updated.
30
30
31
31
You can listen for this by attaching to the `@model-updated` (`v-model-updated`) event on the `<vue-form-generator />` component.
Copy file name to clipboardExpand all lines: fields/field_properties.md
+20-15Lines changed: 20 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,18 +9,19 @@
9
9
| model |_none_|`String`| Name of property in the model |
10
10
| id |_auto-generated_|`String`|`id` of the field. If not set, will be auto-generated from the slugified version of either: `schema.inputName`, `schema.label` or `schema.model`, in that order. If the [`fieldIdPrefix` option](/options.md) is set, it's value will be prepended to both manual & auto-generated ids. |
11
11
| inputName |_none_|`String`| set `name` attribute to `input` field. You can use it to generate normal HTML Forms and submit the field values to server-side. [Example](https://github.com/vue-generators/vue-form-generator/tree/master/examples/post-form)|
12
-
| featured |`false`|`Boolean`| is it a featured \(bold\) field? It can be a function too. |
13
-
| visible |`true`|`Boolean`| if `false`, field will be hidden. It can be a function too. |
14
-
| disabled |`false`|`Boolean`| if `true`, field will be disabled. It can be a function too. |
15
-
| required |`false`|`Boolean`|if`true`, must be fill this field \(need to use validator\). |
12
+
| featured |`false`|`Boolean`| is it a featured \(bold\) field? Can be a function too. |
13
+
| visible |`true`|`Boolean`| if `false`, field will be hidden. Can be a function too. |
14
+
| disabled |`false`|`Boolean`| if `true`, field will be disabled. Can be a function too. |
15
+
| required |`false`|`Boolean`|If`true`, Stylizes the field as required. Works in conjunction with validators. |
16
16
| multi |`false`|`Boolean`| if `true`, it will be visible only if `multiple` is `true` in component attributes |
17
17
| default |_none_| any | Default value of the field \(used when creating a new model\)|
18
-
| hint |_none_|`String`|show this hint below the field |
19
-
| help |_none_|`String`|show this help if mouse hover the question icon before the caption of field. _You can use HTML elements too._|
18
+
| hint |_none_|`String`|Show this hint below the field |
19
+
| help |_none_|`String`|Tooltip/Popover triggered by hovering over the question icon before the caption of field. _You can use HTML elements too._|
20
20
|[validator](/validation/README.md)|_none_|`Function` or `Array`| Validator for value. It can be an array of functions too. |
21
21
| [validateDebounceTime](/validation/README.md#debounced-validation) | _none_ | Amount of time in milliseconds validation waits before checking, refer to [validation](/validation/README.md#debounced-validation)
22
-
| styleClasses |_none_|`String` or `Array`|custom css style classes. They will be appended to the `.from-group`|
22
+
| styleClasses |_none_|`String` or `Array`|Custom CSS style classes. They will be appended to the `.from-group`|
23
23
|[buttons](inside_buttons.md)|_none_|`Array`| Array of button objects. This is useful if you need some helper function to fill the field. _\(E.g. generate password, get GPS location..etc\)\*_|
@@ -112,9 +113,13 @@ For fields [select](select.md), [checklist](checklist.md), [selectEx](selectex.m
112
113
}
113
114
```
114
115
115
-
## Custom properties
116
+
## Custom Attributes
116
117
117
-
You can add custom properties, such as `data-attributes`, to fields by using an `attributes` object. To add properties to the input field itself, simply specify the attribute names and values in the model:
118
+
You can add custom HTML Attributes, such as `data-attributes`, to fields by using an `attributes` object.
119
+
120
+
You can also specify the attributes of the surrounding wrapper and label:
121
+
122
+
The attributes object is broken up into "wrapper", "input" and "label" objects which will attach attributes to the respective HTML element in the component. All VFG Core fields support these, where applicable.
118
123
119
124
```javascript
120
125
{
@@ -123,13 +128,14 @@ You can add custom properties, such as `data-attributes`, to fields by using an
123
128
model:"first_name",
124
129
label:"First Name",
125
130
attributes: {
126
-
"data-toggle":"collapse",
127
-
"title":"Some Tooltip Title"
131
+
wrapper: { "data-toggle":"collapse" },
132
+
input: { "data-toggle":"tooltip", "title":"Some Tooltip to be displayed by Bootstrap Tooltips" },
133
+
label: { "custom-attr":"custom-value" }
128
134
}
129
135
}
130
136
```
131
137
132
-
You can also specify the attributes of the surrounding wrapper and label:
138
+
If you do not specify where the attributes go, and just provide a flat "attributes" property, then the attributes will be assigned to the "input" element on the component by default.
133
139
134
140
```javascript
135
141
{
@@ -138,9 +144,8 @@ You can also specify the attributes of the surrounding wrapper and label:
138
144
model:"first_name",
139
145
label:"First Name",
140
146
attributes: {
141
-
wrapper: { "data-toggle":"collapse" },
142
-
input: { "data-toggle":"tooltip", "title":"Some Tooltip to be displayed by Bootstrap Tooltips" },
0 commit comments