As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex.
The use of v-for in Vue.js helps me loop through form objects and render the appropriate component on screen - whether it's a TextField, DateField, CheckField, or any other defined type.
Let's dive into the code:
In store/module/forms.js (Vuex), you'll find an array of form objects, each specifying details like name, type, value, and options. The 'css' property within 'options' controls the width of the field, set at 50% here.
[
{
name: 'familiarIncome',
type: 'TextField',
value: '',
options: {
dataname: 'familiarIncome',
mandatory: true,
label: 'Renda familiar',
placeholder: '',
rules: fieldRules.float('a renda familiar'),
css: 'width: 50%', // This style will be applied to the component
},
}
]
Next, in pages/formulario.js: (only three input components have been written so far)
<template>
<v-app class="container d-flex justify-center">
<h1>Coleta de dados</h1>
<v-form class="container fluid">
<h2>Dados pessoais</h2>
<div class="personal-data d-flex flex-wrap">
<div
v-for="field in getForm.personalData"
:key="field.name"
class="field"
<!-- This 'field' class is significant -->
>
<component
:is="field.type"
v-bind="field.options"
@change="updateData((section = 'personalData'), $event)"
></component>
</div>
</div>
<div class="social-benefits"></div>
<div class="is-disabled"></div>
<div class="address"></div>
<div class="child-already-born"></div>
</v-form>
</v-app>
</template>
<script>
import { mapGetters } from 'vuex'
import TextField from '../components/inputs/textfield.vue'
import ConfirmButton from '../components/inputs/confirmbutton.vue'
import SelectField from '../components/inputs/selectfield.vue'
export default {
name: 'Formulario',
components: { TextField, ConfirmButton, SelectField },
data() {
return {
formToken: this.$route.params.token,
}
},
computed: {
...mapGetters(['getForm']),
},
methods: {
updateData(section, eventData) {
const data = {
section,
...eventData,
}
this.$store.commit('setFormField', data)
console.log(this.$store.state)
},
},
}
</script>
<style scoped>
.field {
padding: 7px;
width: 50%;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 24px;
}
</style>
Here's a snapshot of the webpage: https://i.sstatic.net/CfvUH.png
If there are any crucial details I've missed, feel free to point them out ;)
(Just clarifying, I did extensive research before reaching out for assistance.)