Vue ValidationGroup Props
elementAttr
Specifies the global attributes to be attached to the UI component's container element.
- <template>
- <DxValidationGroup ...
- :element-attr="validationGroupAttributes">
- </DxValidationGroup>
- </template>
- <script>
- import DxValidationGroup from 'devextreme-vue/validation-group';
- export default {
- components: {
- DxValidationGroup
- },
- data() {
- return {
- validationGroupAttributes: {
- id: 'elementId',
- class: 'class-name'
- }
- }
- }
- }
- </script>
height
This property accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"20vh"
,"80%"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
onDisposing
A function that is executed before the UI component is disposed of.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model | any |
Model data. Available only if you use Knockout. |
onInitialized
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
onOptionChanged
Name | Type | Description |
---|---|---|
model | any |
Model data. Available only if you use Knockout. |
fullName |
The path to the modified property that includes all parent properties. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
|
name |
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into. |
|
value | any |
The modified property's new value. |
The following example shows how to subscribe to component property changes:
- <template>
- <DxValidationGroup ...
- @option-changed="handlePropertyChange"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxValidationGroup from 'devextreme-vue/validation-group';
- export default {
- components: {
- DxValidationGroup
- },
- // ...
- methods: {
- handlePropertyChange: function(e) {
- if(e.name === "changedProperty") {
- // handle the property change here
- }
- }
- }
- }
- </script>
width
This property accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"20vw"
,"80%"
,"auto"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
If you have technical questions, please create a support ticket in the DevExpress Support Center.