[Vuejs]-Vue Form Components and Conditional Rendering Overhead

by

0👍

✅

Well, as you said, there are many options to do it, I like to use the "Component" component (weird right?), This approach is kind of advanced, but I like it.

By the way, using AI (a lot of ifs) is not bad, because you are rendering what you need, just be sure to use v-if, v-else-if and v-else statements, ie:

<template>
  <div>
    <my-checkbox-input v-if="inputType === 'checkbox' />
    <my-text-input v-else-if="inputType === 'text' />
    <my-password-input v-else-if="inputType=== 'password' />
    <input v-else />
  <div>
</template>
<script>
export default {
  props: {
    inputType: {
      type: String,
      required: true
    }
  }
}
</script>

Above you can see a basic example, you should pass the required props or attributes to each input.

Now, this is what I use to have a group of components using the vue component "component":

<component
  v-for="setting in additionalSettings"
  :key="setting.feature"
  :is="setting.component"
  v-model="setting.enabled"
  :class="setting.class"
  :label="setting.label"
  :description="setting.description"
  :input-description="getEnableOrDisableWord(setting.enabled)"
  :disabled="onRequest"
/>

To import the component(s):

export default {
  name: "AdditionalSettingsContentLayout",
  components: {
    SelectInput: () =>
      import(/* webpackChunkName: "SelectInput" */ "../components/SelectInput"),
  },
}

I’m using this import syntax to add code splitting and lazy load (I think that is for that)

In this case, I’m using a json file as settings for the components:

  settings: [
    {
      component: "SelectInput",
      enabled: false,
      label: "Toggle Personal Agenda feature on/off by event in ControlPanel",
      feature: "ENABLE_MY_AGENDA",
      class: "tw-mt-2 tw-mb-10",
    },
    {
      component: "SelectInput",
      enabled: false,
      label: "Enable/disable Meeting scheduling by event",
      feature: "ENABLE_MEETING_SCHEDULING",
      class: "tw-mt-2 tw-mb-0 tw-mb-10",
    },
    {
      component: "SelectInput",
      enabled: false,
      label: "Enable/disable Matchmaking by event",
      feature: "ENABLE_MATCHMAKING",
      class: "tw-mt-2 tw-mb-0",
    },
  ],

I’m using Vuex to handle the change/update of the "enabled" state. The example above only uses the SelectInput component, but it could be any other component, only be sure to pass the required information for each field/input.

Be sure to do step by step changes or updates in your forms.

Read more about it here

Leave a comment