vue-easy-comp
The purpose of this module is to gather common components without any styles.
Select
Properties
| Name | type | Required | Default value | Description |
|---|
| classes | string[] | false | - | Allow to add class to the select element. |
| disabled | boolean | false | false | Allow to disabled the select. |
| id | string | false | - | Allow to add an id on the select element. |
| items | string[] or object[] | true | - | The list of item to use in the select. |
| options | object | false | See below | Additinal option for the component. |
| v-model | object or string | true | - | The selected value on the select element. |
Options
| Name | type | Default value | Description |
|---|
| descriptionField | string | "" | Used when items is an array of object. Determine the object propertie to use as label in the option elements. If empty it will consider item as an string array. |
| idField | string | "" | Used when items is an array of object. Determine the object propertie to use as id in the option elements. If empty it will use the index. |
Events
Examples
String array
<template>
<SelectComponent v-model="selected" :items="items"></SelectComponent>
</template>
<script>
import {SelectComponent} from 'vue-easy-comp';
export default {
components:{SelectComponent},
data(){
return {
items: ['Tadeus', 'Thomenn', 'Thingol'],
selected: 'Tadeus'
}
}
};
</script>
Object array
<template>
<SelectComponent
v-model="selected"
:items="items"
:options="options"
:classes="classes"
:disabled="disabled
@change="onChange">
</SelectComponent>
</template>
<script>
import {SelectComponent} from 'vue-easy-comp';
export default {
components:{SelectComponent},
data(){
return {
items: [{name: 'Tadeus', num: 99}, {name: 'Thomenn',num: 79} {name: 'Thingol', num: 42}],
selected: {name: 'Tadeus', num: 99},
classes: ['css-select-class'],
options: {
descriptionField: "name",
idField: "num"
},
disabled: true
},
methods: {
onChange(newValue){
...
}
}
};
};
</script>
nav
Properties
| Name | type | Required | Default value | Description |
|---|
| classes | string[] | false | - | Allow to add class to the select element. |
| id | string | false | - | Allow to add an id on the select element. |
| items | string[] or object[] | true | - | The list of item to use in the select. |
| options | object | false | See below | Additinal option for the component. |
| v-model | object or string | true | - | The selected value on the select element. |
Options
| Name | type | Default value | Description |
|---|
| descriptionField | string | "" | Used when items is an array of object. Determine the object propertie to use as label in the option elements. If empty it will consider item as an string array. |
| idField | string | "" | Used when items is an array of object. Determine the object propertie to use as id in the option elements. If empty it will use the index. |
Events
Examples
String array
<template>
<NavComponent v-model="selected" :items="items"></NavComponent>
</template>
<script>
import {NavComponent} from 'vue-easy-comp';
export default {
components:{NavComponent},
data(){
return {
items: ['Tadeus', 'Thomenn', 'Thingol'],
selected: 'Tadeus'
}
}
};
</script>
Object array
<template>
<NavComponent
v-model="selected"
:items="items"
:options="options"
:classes="classes"
@change="onChange">
</NavComponent>
</template>
<script>
import {NavComponent} from 'vue-easy-comp';
export default {
components:{NavComponent},
data(){
return {
items: [{name: 'Tadeus', num: 99}, {name: 'Thomenn',num: 79} {name: 'Thingol', num: 42}],
selected: {name: 'Tadeus', num: 99},
classes: ['css-select-class'],
options: {
descriptionField: "name",
idField: "num"
},
disabled: true
},
methods: {
onChange(newValue){
...
}
}
};
};
</script>