How to get key and value in Vuetify text field?

Question

I use Vuetify in the frontend and Laravel in the backend. I'm trying to create a dynamic table where the user can set the column names himself. Therefore I created a form with a loop for 2 fields:

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

This gives the following example:

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

I'd like to have:

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

   //and so on till 10
}

Is this possible?

Or do i need to change the values in the backend?

What is the right setup?

Answer 1

You can't set properties on objects that don't exist yet and the template should not create them. But you can use a computed to format:

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;
  }
}

In your template, you also need to use n-1 since the array starts at 0 but counting starts at 1:

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

Demo:

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>