如何在 Vuetify 文本字段中获取键和值？

Question

我在前端使用 Vuetify，在后端使用 Laravel。我正在尝试创建一个动态表，用户可以在其中自己设置列名。因此，我为 2 个字段创建了一个带有循环的表单：

<template>
    <div>
        <v-card>
            <v-card-text>
                <v-row v-for="n in numTextFields" align="center">
                    <v-col> <h3> Text {{ n }} </h3> </v-col>
                    <v-col> <v-text-field label="Bezeichnung" v-model="form.text.name[n]" > </v-text-field> </v-col>
                    <v-col> <v-switch label="Erforderlich" value="1" v-model="form.text.required[n]"></v-switch></v-col>
                    <v-col>Info</v-col>
                </v-row>
                {{ form }}
            </v-card-text>
        </v-card>
</div>
</template>

<script>
export default {
name: "SmartTableColumnSetting",
    data() {
        return {
            numTextFields: 10,
            form: {
                text: {
                    name: [],
                    required: []
                }
            }
        }
    },
}
</script>

这给出了以下示例：

{ "text": { "name": [ null, "Input Text 1", null, null, null, null, null, "Input Text 7" ], "required": [ null, null, null, null, "1", null, "1" ] } }

我想要：

{"text": {
   "type_1 :{
       text: "Input Text 1"
       required: 1
    },
   "type_2 :{
       text: "Input Text 2"
       required: 2
    },

   //and so on till 10
}

这可能吗？

或者我需要更改后端的值吗？

什么是正确的设置？

Answer 1

您不能为尚不存在的对象设置属性，并且模板不应创建它们。但是你可以使用计算来格式化：

computed: {
  formatted() {
    const results = { text: {} };
    for (let i = 0; i < this.numTextFields; i++) {
      results.text['type_' + (i + 1)] = {
        text: this.form.text.name[i],
        required: this.form.text.required[i],
      }
    }
    return results;
  }
}

在您的模板中，您还需要使用n-1，因为数组从 0 开始，但计数从 1 开始：

v-model="form.text.name[n-1]"
v-model="form.text.required[n-1]"

演示：

new Vue({
  vuetify: new Vuetify(),
  el: "#app",
  name: "SmartTableColumnSetting",
  data() {
    return {
      numTextFields: 10,
      form: {
        text: {
          name: [],
          required: []
        }
      }
    }
  },
  computed: {
    formatted() {
      const results = { text: {} };
      for (let i = 0; i < this.numTextFields; i++) {
        results.text['type_' + (i + 1)] = {
          text: this.form.text.name[i],
          required: this.form.text.required[i],
        }
      }
      return results;
    }
  }
})

<div id="app">
  <v-app>
    <v-main>
      {{ formatted }}
      <div>
        <v-card>
          <v-card-text>
            <v-row v-for="n in numTextFields" align="center" :key="n">
              <v-col> <h3> Text {{ n }} </h3> </v-col>
              <v-col> <v-text-field label="Bezeichnung" v-model="form.text.name[n-1]" > </v-text-field> </v-col>
              <v-col> <v-switch label="Erforderlich" value="1" v-model="form.text.required[n-1]"></v-switch></v-col>
              <v-col>Info</v-col>
            </v-row>
            {{ form }}
          </v-card-text>
        </v-card>
      </div>
    </v-main>
  </v-app>
</div>


<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">
<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>