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

Getting a callback from an event listener in Nuxt/Vue: A step-by-step guide

I am currently using Nuxt version 2.15.8 and I am looking for a way to retrieve the result of an emitted event. In my setup, there is a child component that emits the event, then the parent component receives it and makes API calls based on it. I want to e ...

vue.jsvuejs2nuxt.js

how to make a post request to an API using Next.js

I am attempting to make a request to the Exist API using next.js and the backend is in PHP. I am trying to send a post request (using Axios) with data and retrieve the response. How can I manage this API in my code? I have read that I need to include som ...

javascriptphpreactjsaxiosnext.js

The 'type' property within the NGRX Effect is not present in the type Observable<any[]>

I am currently in the process of upgrading my Angular app from version 6 to version 7. Additionally, I am upgrading the TypeScript version from 2.7.2 to 3.1.6. The issue I'm encountering is that TypeScript is flagging an error stating that my ngrx ef ...

angulartypescriptrxjsngrx

Leveraging a single Vuex module store across various sibling components

In my application, I am working with one global state that contains several modules. Currently, I have Vue components set up for different sections of my page. Everything is properly configured so that /foo utilizes the foo store (which is functioning co ...

vue.jsvue-componentvuexvuex-modules

Tips for retaining input field content within a BootstrapVue table

Below is a BootstrapVue table I'm working with; The code, courtesy of this response, is showcased below; new Vue({ el: '#app', data() { return { filter: '', items: [ { id: 1, first_name: "Mikkel&qu ...

javascriptvue.jscookiesbootstrap-vue

Troubleshooting issues with setting errors on a FormGroup instance in Angular Reactive Forms are proving to be more challenging

Currently I am working with Angular 4.4.3 reactive forms to create custom validation for a group of controls within a form. As per the documentation on AbstractControl.setErrors, this method updates the errors property of the AbstractControl that it's ...

angularvalidationtypescriptangular-reactive-formsangular-forms

Tips for sending a complicated data structure from React to Node using Axios

As a novice, I am facing challenges updating a record with a nested object using axios from react : Despite trying numerous methods to make it work, such as the commented-out examples below, I have not been successful. const saveBlend = async (layout, ...

node.jsreactjsjsonexpressaxios

Why do referees attempt to access fields directly instead of using getters and setters?

I am facing an issue with my TypeScript class implementation: class FooClass { private _Id:number=0 ; private _PrCode: number =0; public get Id(): number { return this._Id; } public set Id(id: number) { this._Idprod ...

typescriptvue.jsvuejs3

Tips for verifying the rendered view post data retrieval from an API in Vue JS

Having trouble retrieving data from the API using Vue JS and printing the page? After fetching the data, some elements may not render completely when trying to print, resulting in blank data being displayed. While using a setTimeout function may work for s ...

javascriptvue.jsprintingreactive-programming

I recently updated all my projects to Angular 14, but when I tried to install a package using `npm i`, it still

The challenge at hand I encountered an issue with my two Angular projects. The first project serves as a library utilized by the second project. I recently upgraded both projects to Angular 14 following this guide. However, after running an npm i on the ...

angulartypescriptnpmdependencies

A function that retrieves an array containing each individual element from a multi-dimensional array

In my system, I have two essential objects: Order and ProductOrder. Order Object: { id:number; productOrders: ProductOrder[]; } ProductOrder object: { id: number; productName: string; } Currently, I store an array of Order objects in a variable called o ...

arraystypescript

Troubleshooting error 422: Fixing issues with Mongoose and Vue

I'm encountering an issue with my API while using express and mongoose to add events to the database. Specifically, I am receiving an error 422 when making the request with axios, however, this error does not occur when using Postman. Just for refere ...

apivue.jsexpressmongooseaxios

I recently installed bootstrap, jquery, and popper.js on my live server, but to my surprise, nothing was appearing on the screen. Despite compiling the

After successfully installing bootstrap, jquery, and popper.js, I encountered an issue on my live server where nothing was displaying. Oddly enough, no errors were detected after compiling the code. import { createApp } from 'vue' import App from ...

javascriptvue.jsbootstrap-4

What's the best way to conduct a snapshot test on a Vue Single File Component page within a Nuxt application that solely consists of a

Is it possible to perform a snapshot test on a Vue SFC page in Nuxt that only has a layout defined, using jest? For instance: <script> export default { layout: 'some-layout-name' }; </script> When attempting to generate a snapshot ...

vue.jsvuejs2jestjsnuxt.jsnuxtjs

Tips for bringing in Cassandra driver types in TypeScript?

In the documentation for the Cassandra driver, they provide code examples like this: const Uuid = require('cassandra-driver').types.Uuid; const id = Uuid.random(); However, when attempting to use this in Visual Studio Code, the Uuid class type ...

typescript

New techniques in VueJS 3: managing value changes without using watchers

I am currently working on coding a table with pagination components and I have implemented multiple v-models along with the use of watch on these variables to fetch data. Whenever the perPage value is updated, I need to reset the page value to 1. However, ...

javascriptvue.jswatch

Is the TypeScript compiler neglecting the tsconfig.json file?

I am new to TypeScript and currently exploring how to set it up in WebStorm. One of the first steps I took was creating a tsconfig.json file in the main directory of my project and updating the built-in TypeScript compiler to version 1.6.2. However, despit ...

typescriptreferencetsconfig

history.push() function is ineffective within a JavaScript file that does not contain a class

I've been delving into React and encountering an issue with the history.push("/dashboard") method, it's not functioning as expected. import axios from "axios"; import { GET_ERRORS, GET_PROJECT, GET_PROJECTS } from "./types"; export const createP ...

javascriptreactjsaxios

Upon sending a POST request to http://localhost:5000/getData, a 404 error (Not Found) was encountered while using axios

As a newcomer to react and node.js, I have set up a fake server running on port 5000 with an API (http://localhost:5000/getData) that contains a hardcoded array of objects. My goal is to add a new object to this API from my react frontend running on port 3 ...

javascriptnode.jsreactjsaxioshttprequest

Error message: "An issue has been encountered within Angular 4 where it is

Thank you for any assistance, I realize this may be a beginner question... but I seem to be missing something and my TypeScript code is error-free. My goal is simple: I want to track which Main Menu Item is currently selected. To achieve this, I have bou ...

angulartypescript