Building a Vuetify Form using a custom template design

My goal is to create a form using data from a JSON object. The JSON data is stored in a settings[] object retrieved through an axios request:

[ {
  "id" : 2,
  "name" : "CAR_NETWORK",
  "value" : 1.00
}, {
  "id" : 3,
  "name" : "SALES_FCT_SKU_MAX",
  "value" : 1.00
}, {
  "id" : 4,
  "name" : "SALES_FCT_SKU_MIN",
  "value" : 1.00
}, {
  "id" : 5,
  "name" : "NB_PCB",
  "value" : 1.00
}, {
  "id" : 6,
  "name" : "DESCENTR_SC1_SC2",
  "value" : 1.00
}, {
  "id" : 7,
  "name" : "DESCENTR_SC3_SC4",
  "value" : 1.00
}, {
  "id" : 8,
  "name" : "DVS_CAR",
  "value" : 1.00
}, {
  "id" : 9,
  "name" : "DVS_MAG",
  "value" : 1.00
}, {
  "id" : 10,
  "name" : "VMCAR_PCB",
  "value" : 1.00
}, {
  "id" : 11,
  "name" : "VMCAR_PAL",
  "value" : 1.00
}, {
  "id" : 1,
  "name" : "COEFF_SEASON_MAX",
  "value" : 1.00
} ]

I am looking to create a v-template with textfields structured like this :

<v-text-field v-model="value" label="name"></v-text-field>

Does anyone have any suggestions on how I can achieve this?

Thank you

typescriptvue.jsaxiosvuetify.js

Answer №1

To ensure your name is readable, run it through a dictionary for conversion

new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
        JSON: [ {
            "id" : 2,
            "name" : "CAR_NETWORK",
            "value" : 1.00
          }, {
            "id" : 3,
            "name" : "SALES_FCT_SKU_MAX",
            "value" : 1.00
          }, {
            "id" : 4,
            "name" : "SALES_FCT_SKU_MIN",
            "value" : 1.00
          }, {
            "id" : 5,
            "name" : "NB_PCB",
            "value" : 1.00
          }, {
            "id" : 6,
            "name" : "DESCENTR_SC1_SC2",
            "value" : 1.00
          }, {
            "id" : 7,
            "name" : "DESCENTR_SC3_SC4",
            "value" : 1.00
          }, {
            "id" : 8,
            "name" : "DVS_CAR",
            "value" : 1.00
          }, {
            "id" : 9,
            "name" : "DVS_MAG",
            "value" : 1.00
          }, {
            "id" : 10,
            "name" : "VMCAR_PCB",
            "value" : 1.00
          }, {
            "id" : 11,
            "name" : "VMCAR_PAL",
            "value" : 1.00
          }, {
            "id" : 1,
            "name" : "COEFF_SEASON_MAX",
            "value" : 1.00
          } ]
      })
});
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaaa3a2b88cf8e2b4">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65131000110c031c25574b1d">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <v-row>
            <v-col cols="12" v-for="field in JSON" :key="field.id">
              <v-text-field v-model="field.value" :label="field.name"></v-text-field>
            </v-col>
          </v-row>
        </v-container>
      </v-main>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b1d1e0e2b594513">[email protected]</a>/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aed8dbcbdac7c8d7ee9c80d6">[email protected]</a>/dist/vuetify.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>

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

Angular's Integration with PayPal for Shipping Costs

I am facing an issue with my e-commerce website where the receipt only displays the total payment of the items purchased. I have searched for an SDK that supports Angular or TypeScript PayPal integration, but could only find one for JavaScript which did ...

angulartypescriptpaypalpaypal-sandboxpaypal-rest-sdk

Checking the loading status of .gz files in Chrome browser for a VueJs application involves a few simple steps

I currently have a VueJs application set up with webpack. In the webpack.prod.conf.js file, I have configured the productionGzip setting to generate a .gz file for each of the chunks in the dist folder. productionGzip: true, productionGzipExtensions: [&ap ...

vue.jsgzip

What is preventing me from closing this modal without making changes or saving them?

When passing a task as props and creating a variable in the component to store the initial value, there is a requirement to not save any changes made when clicking on the "Close" button. However, if the "Save" button is clicked, then the changes should b ...

vue.jsvue-component

Hide the MaterialTopTabNavigator from view

Is there a way to hide the react native MaterialTopTabNavigator on the screen while still maintaining the swiping functionality between screens? I want the user to be able to swipe between screens but not see the tab navigator itself. const Tab = creat ...

typescriptreact-native

How should I structure my MySQL tables for efficiently storing a user's preferences in a map format?

My current project involves developing a web application that provides administrators with the ability to manage user information and access within the system. While most user details like name, email, and workID are straightforward, I am facing difficulty ...

mysqlangulartypescriptspring-boot

Is there a way to extract the user ID from the token in the backend using Vue-Auth?

For my project, I am using vue-auth for authentication. In the frontend, I am able to access the necessary information by using code like this: this.$auth.user().id The headers are functioning perfectly as they should, sending the token that can be retrie ...

authenticationvue.jsjwttoken

Tips for transferring a Vuex-stored value to a variable within Vuejs 3 (Quasar 2)

Currently, I have a Vuex store where I am storing a date (referred to as date). In my Vue.js template (using Quasar 2 beta 12), I can easily access this date using {{ date }}. If I make changes to the date in the store, it reflects immediately in the {{ ...

vue.jsvuexvuejs3quasarvuex4

Tips for ensuring the HTML checkbox element is fully loaded before programmatically selecting it

When a user accesses the page, I want certain checkboxes to be automatically checked. To achieve this, I am storing the IDs of the HTML checkbox elements in a service. Upon entering the page, the service is utilized to retrieve an array containing these ID ...

javascriptangulartypescriptcordovaionic-framework

What is the process for importing the TokenExpiredError that is thrown by the verify function in jsonwebtoken?

Is there a way to determine if an Error object thrown by the jwt.verify function in the jsonwebtoken library is of type TokenExpiredError using Typescript's instanceof? For example: import jwt from "jsonwebtoken"; function someFunction() { try { ...

javascripttypescriptjwt

Error Encountered: Visual Studio cannot locate the file 'COMPUTE_PATHS_ONLY.ts' during the build process

Upon fixing my visual studio 2015, an error was thrown that I haven't encountered before. Error Build: File 'COMPUTE_PATHS_ONLY.ts' not found. I did not add COMPUTE_PATHS_ONLY.ts to my Git repository. The other files in the repo rema ...

visual-studiotypescript

What is the significance of the code statement in the Angular ng2-table package?

Could you please explain the functionality of this specific code line? this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData; ...

angulartypescript

Using Higher Order Components (HOC) in combination with Redux compose and Typescript

I am trying to leverage two Higher Order Components (HOC) with Redux compose, but the compiler is not generating the correct types. The Compose function is defined in the Redux source code here source code. To better understand how the code works, you ca ...

reactjstypescriptredux

Disruptions in typing occur due to errors popping up while utilizing zod and react-hook-forms within a TypeScript application

Currently, I am working on developing a registration page for users using react-hook-forms for the registration form and zod for validation. Initially, when testing the form, I noticed that errors only appeared after submitting the form. However, once the ...

reactjstypescriptvitezod

Updating the text area value based on the selected option in a dropdown using Typescript within Angular6

I'm currently facing an issue with updating the text area value based on the selection from a dropdown menu. Below is the design of the dialog: Here's the code snippet I've incorporated for this functionality: <div class="modal-cont ...

angulartypescriptdrop-down-menutextareaonchange

How does Vue compare to Angular in terms of components?

Is there a simple way to render dynamic components in Angular similar to how it's done in Vue? In Vue, rendering a dynamic component is as easy as this: <component v-bind:is="'componentX'"></component> How can this be ...

angularvue.js

There appears to be an issue with the compilation of the TypeScript "import { myVar }" syntax in a Node/CommonJS/ES5 application

In my Node application, I have a configuration file that exports some settings as an object like this: // config.js export var config = { serverPort: 8080 } Within another module, I import these settings and try to access the serverPort property: // ...

javascriptnode.jstypescriptecmascript-6es6-modules

Transfer dynamically created PDFs to Sanity utilizing NextJS and React

I've been working on a NextJS and Sanity e-commerce app where I have successfully set up mock products, a user login system, and checkout functionality. However, I am facing challenges with implementing an invoice system upon user order confirmation. ...

reactjsaxiosnext.jssanityreact-pdf

Place a hook following the storage of a variable in the device's memory

Within a component, I am facing the following situation: const [home, setHome]=useState(false) if(home){ return(<Redirect push={true} to="/" />); } setItem("isRegistered", resquest[0].user) setHome(true) The issue here is that ...

reactjstypescript

Building Silent Authentication in React Native with the help of Auth0: A Step-by-Step Guide

I am currently working on my first React Native app, and I have integrated Auth0 for authentication purposes. My goal is to implement silent authentication using refresh tokens. So far, I have attempted to use the checkSession() method but encountered an ...

javascripttypescriptreact-nativeauth0

Using Promise<void> instead of Promise<any> is the preferred approach

Working with AngularJS, I have created several asynchronous functions that all use the same signature, which is app.Domain.GenericModel.EntityBase (my generic model). Here is an example: get(resource: string): ng.IPromise<app.Domain.GenericModel.Entity ...

angularjstypescriptangular-promise