What is the best way to incorporate nested fieldsets within vue-form-generator?

How can I group skills and status within a nested fieldset using vue-form-generator?

I want to nest a fieldset to group skills and status within the main fieldset. Unfortunately, I couldn't find any information in the documentation on how to achieve this.

var vm = new Vue({
  el: "#app",

  components: {
    "vue-form-generator": VueFormGenerator.component
  },

  data() {
    return {
      model: {
        id: 1,
        name: "John Doe",
        password: "J0hnD03!x4",
        age: 35,
        skills: ["Javascript", "VueJS"],
        email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e18b8e898fcf858e84a1868c80888dcf828e8c">[email protected]</a>",
        status: true
      },
      schema: {
        groups: [{
          legend: "User Details",
          fields: [{
            type: "input",
            inputType: "text",
            label: "ID",
            model: "id",
            readonly: true,
            featured: false,
            disabled: true
          }, {
            type: "input",
            inputType: "text",
            label: "Name",
            model: "name",
            readonly: false,
            featured: true,
            required: true,
            disabled: false,
            placeholder: "User's name",
            validator: VueFormGenerator.validators.string
          }, {
            type: "input",
            inputType: "password",
            label: "Password",
            model: "password",
            min: 6,
            required: true,
            hint: "Minimum 6 characters",
            validator: VueFormGenerator.validators.string
          }, {
            type: "input",
            inputType: "number",
            label: "Age",
            model: "age",
            min: 18,
            validator: VueFormGenerator.validators.number
          }, {
            type: "input",
            inputType: "email",
            label: "E-mail",
            model: "email",
            placeholder: "User's e-mail address",
            validator: VueFormGenerator.validators.email
          }, {
            type: "checklist",
            label: "Skills",
            model: "skills",
            multi: true,
            required: true,
            multiSelect: true,
            values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
          }, {
            type: "switch",
            label: "Status",
            model: "status",
icon-toggle: '1',
            multi: true,
            readonly: false,
            featured: false,
            disabled: false,
            default: true,
callback_function: alert('toggled'),

            textOn: "Active",
            textOff: "Inactive"
          }]
        }, , "", false],//
],
        ]
      },

      >

      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true
      }
    };
  }

});
html {
  font-family: Tahoma;
  font-size: 14px;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

pre {
  overflow: auto;
}

pre .string {
  color: #885800;
}

pre .number {
  color:

#2FA6DB; //
blue;
}

pre .boolean {
  color: magenta;
}

pre .null {
  color: red;
}

pre .key {
  color: green;
}

h1 {
  text-align: center;
  font-size: 36px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}

fieldset {
  border: 0;
}

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  border-color: #ddd;
}

.panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.panel-body {
  padding: 15px;
}

.field-checklist .wrapper {
  width: 100%;
}

fieldset {
  border: 1px groove #ddd !important;
}
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f7f4e4ace7eef3ecace6e4efe4f3e0f5eef3c1b3afb0afb0">[email protected]</a>/dist/vfg.js"></script>
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="562023337b3039243b7b313338332437223924166478677866">[email protected]</a>/dist/vfg.css" rel="stylesheet" />
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26505343661408140817">[email protected]</a>/dist/vue.min.js"></script>
<h1 class="text-center">Demo of vue-form-generator</h1>
<div class="container" id="app">
  <div class="panel panel-default">
    <div class="panel-heading">Form</div>
    <div class="panel-body">
      <vue-form-generator :schema="schema" 

:model=“model+" options="formOptions"></vue-form-generator>
    </div>
  </div>

</div>

Below is an example of basic html:

<fieldset>
  <legend>User Details</legend>
  <label for="">ID</label>
  <input type="text">
  <br><label for="">Name</label>
  <input type="text">
  <br><label for="">Password</label>
  <input type="password">
  <br><label for="">Age</label>
  <input type="text">
  <br><label for="">Email</label>
  <input type="text">
  <fieldset>
    <legend>User Special Details</legend>
    <br><label for="">Skills</label>
    <input type="text">
    <br><label for="">Status</label>
    <input type="text">
  </fieldset>
</fieldset>

UPDATE:

I have included a basic HTML demonstration above

javascriptformsvue.jsjsonschema

Answer №1

If my interpretation is correct, you already possess the capability to incorporate a fieldset as part of your schema setup. By utilizing groups, you can achieve the distinct fieldset that you desire. If you require dynamic if/then functionality, consider using the visible attribute demonstrated in the initial model below. This allows you to specify when your field should be displayed based on certain conditions. Each group represents a new fieldset within the HTML structure.

Given that this is an older inquiry, I trust you have likely resolved this matter by now.

schema: {
  groups: [{
    legend: 'Entry',
      {model: "enter", type: "radios", label: "Enter", values: ["Yes","No"]),
      {model: "entryPrice", type: "input", inputType: "number", label: "Entry Price",
                  visible(model) {
                    return model && model.entryType != 'Yes';
                  }
                }
     legend: 'newGroup',
      {model: "model", type: "text" , label: "Cool Label", inputType: "text"}
   }]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue arises when the Javascript function is triggered twice, resulting in only 3 out of 4

I'm currently working on a JavaScript calculator project. Everything is running smoothly except for the add() function (subtraction, multiplication, and division are all functioning properly). Additionally, when I hit "=" it displays the answer twice ...

javascripthtmlformsdom-events

"Unlocking the Power of Colormap in JavaScript: A Comprehensive

I am in need of incorporating a colormap into my JavaScript page. My server side is powered by Flask, written in Python. To render colormaps on the client side, I have a JavaScript file that requires the colormap module (installed using "npm install colorm ...

javascriptnpmnpm-installjavascript-import

Can anyone tell me the method to retrieve the id of the current element that initiated the horizonSwiper event in JavaScript?

I successfully integrated horizonSwiper into my php(Yii2) website to display images from different albums in a horizontal row with the ability to scroll left and right. Now, I am looking to implement lazy loading when scrolling or swiping left/right. Howev ...

javascriptphpslideyii2-advanced-appswiper.js

The callback URL for signing in is malfunctioning within NextAuth

My navigation component displays "Sign In" and "Sign Out" based on the active session status. The issue I am facing is with the callback after signing in. Upon signing out, the button successfully redirects to the Home Page. However, after a successful si ...

javascriptreactjsnext.jsnext-auth

Using React to create multiple modals and dynamically passing props

Each item in my list (ProjectActivityList) has an Edit button which, when clicked, should open a modal for editing that specific item. The modal requires an ID to identify the item being edited. var ProjectActivities = React.createClass({ onEditItem: ...

javascriptreactjssemantic-ui

Utilizing a variable in one function within a separate function (Guide to Calculating Combinations)

As a beginner in JavaScript, I'm struggling with using a variable from one function in another function. My current project involves creating a combination calculator, but I'm facing issues with getting the output when using this script code. ...

javascripthtmlfunction

What is the method for importing the merge function from "lodash/merge" in TypeScript?

When using ES6, it's possible to import only a single function from a library in order to reduce the overall bundle size. For example: import merge from "lodash/merge" But in TypeScript, the statement above can trigger a compile error: Cannot find m ...

javascripttypescript

Using Vue.js, learn how to target a specific clicked component and update its state accordingly

One of the challenges I'm facing is with a dropdown component that is used multiple times on a single page. Each dropdown contains various options, allowing users to select more than one option at a time. The issue arises when the page refreshes afte ...

javascripttypescriptvue.jsvuejs2vuejs3

Form with a Laravel table

I have a website that includes a form for users to input their language skills. Initially, I organized it as a list: <div class="col-md-3"> <ul class="list-unstyled" id="request_profile_languages"> @isset($requestProfil ...

phpjqueryformslaravel-5

Creating dynamic keys to insert objects

In my coding project, I am dealing with an empty array, a value, and an object. Since there are multiple objects involved, I want to organize them into categories. Here is an example of what I envision: ARRAY KEY OBJECT OBJECT KEY OBJECT ...

javascripttypescript

What's the best way to showcase an icon in a Vuetify 3 v-list-item component?

Is there a way to include an icon in a Vuetify 3 v-list-item now that v-list-item-icon has been removed in the latest version? My code snippet currently lacks an icon next to the title, and I'm seeking advice on how to integrate an icon (e.g. 'md ...

vue.jsvuetify.jsvuetifyjs3

Utilize jQuery to automatically assign numbers to <h1-h6> headings

Looking to develop a JavaScript function that can automatically number headings (h1- h6) for multiple projects without relying on CSS. Currently achieving this with CSS: body { counter-reset: h1; } h1 { counter-reset: h2; } h2 { counter-reset: h3; } ... T ...

javascripthtmljquerycssfunction

Issue with Angular 2 data table search filter - The property 'first_name' is not found in the 'type {}'

Currently in my Angular-cli project, I have implemented the following code for a data table with a search filter. The tutorial referenced in the link below was used, leveraging loadsh. http://plnkr.co/edit/grhag1P85teN4ftggkms?p=preview You can find the p ...

javascriptangulartypescriptangular-cli

Update dataTable with new data fetched through an ajax call from a separate function defined in a different

I need to refresh the data in my datatable after using a function to delete an item. The function for deleting is stored in a separate file from the datatable. Here is the delete function code: function removeFunction(table,id) { var txt= $('.ti ...

javascriptjqueryajaxdatatable

The combination of PHP and JavaScript looping is struggling to produce the correct sequence of results

for(var i=0; i<participantNum; i++){ studentID = $('#txtID'+(i+1)).val(); alert(studentID); //implementing a PHP function to validate each student's ID by making AJAX calls request("http://localhost/lastOrientation/2_regis ...

phpjavascriptjquery

Is it possible to replicate the 'authorization' parameter found in the browser?

Is there a way to use JavaScript to retrieve the API 'Authorization' parameter, which contains the access token, from the Headers section of the Inspect Tools -> Network in Firefox? Alternatively, is it possible to save a log of network traffi ...

javascript

Warning: Modification of Vuex store state should only be done within mutation handlers to avoid errors

Whenever I try to edit or add a contract in my code, an error occurs. [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers." How can I resolve this ...

vue.js

organizing strings in alphabetical order using TypeScript

My md-collection is set up to display a list of emails like this: <md-collection-item repeat.for="u of user" class="accent-text"> <div class="row"> <di ...

javascripttypescriptaureliaalphabetical

The attempt to install myapp using npx create-react-app has failed. The installation has been aborted

Attempting to create a new project using npx create-react-app my-app resulted in an error message saying Aborting installation. https://i.sstatic.net/IhpQJ.jpg Initially, I had node v14.17.1 installed. Upgrading to the latest version 16.4.0 did not resol ...

javascriptreactjsmacosnpmcreate-react-app

Is there a way to plot countries onto a ThreeJS Sphere?

Currently engaged in a project involving a 3D representation of Earth. Successfully created a 3D Sphere using ThreeJS ...

javascripthtmlcanvasthree.jscoordinates