Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/taverasady/vue-dynamic-inputs
https://github.com/taverasady/vue-dynamic-inputs
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/taverasady/vue-dynamic-inputs
- Owner: taverasady
- Created: 2020-03-04T18:24:30.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T09:05:49.000Z (over 1 year ago)
- Last Synced: 2024-01-23T17:28:47.425Z (4 months ago)
- Language: Vue
- Size: 667 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Lists
- awesome-vue - vue-dynamic-inputs - Create dynamic forms with buefy from json [Online Demo](https://codepen.io/taverasady/pen/LYVzevo) (Components & Libraries / UI Components)
- awesome-vue - vue-dynamic-inputs - Create dynamic forms with buefy from json [Online Demo](https://codepen.io/taverasady/pen/LYVzevo) (Components & Libraries / UI Components)
- awesome-vue - vue-dynamic-inputs - Create dynamic forms with buefy from json [Online Demo](https://codepen.io/taverasady/pen/LYVzevo) (Components & Libraries / UI Components)
- awesome-vue - vue-dynamic-inputs - Create dynamic forms with buefy from json [Online Demo](https://codepen.io/taverasady/pen/LYVzevo) (Components & Libraries / UI Components)
- awesome-vue - vue-dynamic-inputs - Create dynamic forms with buefy from json [Online Demo](https://codepen.io/taverasady/pen/LYVzevo) (Components & Libraries / UI Components)
- awesome-vue - vue-dynamic-inputs - Create dynamic forms with buefy from json [Online Demo](https://codepen.io/taverasady/pen/LYVzevo) (Components & Libraries / UI Components)
- awesome-vue - vue-dynamic-inputs - Create dynamic forms with buefy from json [Online Demo](https://codepen.io/taverasady/pen/LYVzevo) (Components & Libraries / UI Components)
README
Vue js dynamic inputs component
## Preview
## Live demo:
https://codepen.io/taverasady/pen/LYVzevo
## Installation
```
npm i vue-dynamic-inputs
```
### Usage
```html
HTML:
JS:
import DynamicInputs from "vue-dynamic-inputs";
export default {
name: "app",
components: {
DynamicInputs
},
data() {
return {
listOfInputs: [
{
type: "text",
value: "",
col: "6",
placeholder: "",
showLabel: true,
label: "First Name"
},
{
type: "text",
value: "",
col: "6",
placeholder: "",
showLabel: true,
label: "Last Name"
},
{
type: "number",
value: null,
col: "3",
showLabel: true,
label: "Age"
},
{
type: "datepicker",
value: new Date(),
col: "3",
placeholder: "Date of Birth",
showLabel: true,
label: "Date of birth"
},
{
type: "text",
value: "",
col: "6",
placeholder: "example: [email protected]",
showLabel: true,
label: "Email"
},
{
type: "checkbox",
value: false,
col: "3",
placeholder: "Are you single?",
showLabel: false,
label: ""
},
{
type: "switch",
value: false,
col: "3",
placeholder: "",
showLabel: true,
label: "Allow notifications"
},
{
type: "radio",
value: false,
col: "6",
placeholder: "",
showLabel: true,
label: "",
options: [{ name: "Male" }, { name: "Female" }, { name: "Other" }]
}
],
buttonSettings: {
label: "Save",
color: "success",
position: "right",
size: "default"
}
};
},
methods: {
submitedValues(value) {
console.log(value);
}
},
created() {}
};
```