Блог

Главная - Вопросы по программированию - Форма Vuetify с шаблоном

Форма Vuetify с шаблоном

#typescript #vue.js #axios #vuetify.js

#typescript #vue.js #axios #vuetify.js

Вопрос:

Я хотел бы создать форму с данными из JSON.

JSON выглядит следующим образом и сохраняется в объекте settings [] из запроса axios:

 [ {
  "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
} ]

и я хотел бы создать v-шаблон с текстовыми полями, подобными этому :

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

У кого-нибудь есть идея, как это сделать?

Спасибо

Комментарии:

1. Я не совсем уверен, что вам понадобятся только текстовые поля для этого сценария, если вы хотите, чтобы пользователь выбрал любое из них. Возможные флажки или переключатели были бы лучше для вашего случая.

2. Нет, это не флажки, я хотел бы иметь несколько текстовых полей, в которых я мог бы изменять значения после.

3. vuejs.org/v2/guide/list.html

Ответ №1:

Вероятно, вы передадите свое имя через словарь, чтобы преобразовать его в читаемую строку

 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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>