Ways to Refactor Long Forms?

Asked

Viewed 49 times

0

I am having a very great frustration in creating new forms within my team’s project. We handle patient information, which means a lot of information. When we create the components of Forms for each view of Insert/Edit, we end up defining a formValues within the data to store all fields that will be used as v-model. The problem is, by doing this, we end up having a very extensive code, as the example below:

export default {
  // ...
  data: () => ({
    formValues: {
      nome: null,
      nomeMae: null,
      telefone: null,
      celular: null,
      convenios: [],
      // Mais propriedades...
    }
  }),
  
  methods: {
    savePaciente() {
      const payload = cloneDeep(this.formValues);
      // Código de processo
    }
  },
}

This example seems small, however, when the component grows, when business rules enter, when other negotiations appear, this file becomes more and more extensive, because it deals with so many fields. I wonder if there is any way to refactor these Forms, make them smaller and less verbose.

javascript vue.js refactoring

  • How does the HTML code look? Does it also look verbose there? I usually have a separate file that has a field manifest, an object that describes fields with label, initial value, etc... Forms are "verbose"...

  • @Sergio Sim, normally the template ends up becoming very extensive, because it has several components of inputs for each of those fields of formValues

  • 1

    Can you add an example of a full form? curious how you have the code in the template

1 answer

-2

You can separate the components so that you can work in a more isolated way with the logic of each.

inserir a descrição da imagem aqui

I made a small example of how you could separate your Components.

The working example is here https://codesandbox.io/s/httpsptstackoverflowcomquestions450846-dm6g1?file=/src/App.Vue

<!-- App.vue -->

<template>
  <div id="app">
    <input-nome v-model="formValues.nome"/>
    <input-mae v-model="formValues.nomeMae"/>
    <input-telefone v-model="formValues.telefone"/>
    <select-cidade v-model="formValues.cidade"/>
  </div>
</template>

<script>
import InputNome from "./components/custom/InputNome";
import InputMae from "./components/custom/InputMae";
import InputTelefone from "./components/custom/InputTelefone";
import SelectCidade from "./components/custom/SelectCidade";

export default {
  name: "App",
  components: {
    InputNome,
    InputMae,
    InputTelefone,
    SelectCidade
  },
</script>

<!-- InputMae.vue -->

<template>
  <input v-model="data" placeholder="Nome da mãe">
</template>

<script>

import BaseInputValue from "../generics/BaseInputValue.vue";

export default {
  name: "InputMae",
   extends: BaseInputValue
};
</script>

<!-- InputNome.vue -->

<template>
  <input v-model="data" placeholder="Nome completo">
</template>


<script>
import BaseInputValue from "../generics/BaseInputValue.vue";

export default {
  name: "InputNome",
   extends: BaseInputValue
};
</script>

<!-- BaseInputValue -->

<script>
export default {
  name: "BaseInputValue",
  props: ['value'],
  computed : {
    data: {
      get: function(){
        return this.value;
      },
      set: function(newValue){
        this.$emit('input', newValue)
      }
    }
  }
};
</script>

Browser other questions tagged javascript vue.js refactoring

You are not signed in. Login or sign up in order to post.