How to build: click on the current line and load the clicked line information

Question

In my template there is a form and data-table with the information "originated from the form". My difficulty is how to implement that when clicking on the table row causes the information to be loaded in the form with the proper data filled and your text-Fields?

<template>
  <v-container class="fundo-container" id="vida-judicial" fluid>
    <v-card class="fieldset" outlined color="#EEEEEE" fluid>
      <v-card-title>
        <p class="font-weight-bold mb-0">Honorários</p>
      </v-card-title>

      <v-container fluid class="pb-0 mb-n4 my-n4">
        <v-row>
          <v-col cols="12" md="1">
            <v-text-field-vee-validate
            />
          </v-col>

          <v-col cols="12" md="3">
            <v-text-field-vee-validate
            />
          </v-col>

          <v-col cols="12" md="3">
            <v-text-field-vee-validate
              label="Valor Final Risco"
            />
          </v-col>

          <v-col cols="12" md="2">
            <v-text-field-vee-validate
              label="Percentual"
            />
          </v-col>

          <v-col cols="12" md="3">
            <v-text-field
              label="Honorários Mínimos"
            />
          </v-col>

          <v-col cols="12" md="12" />
        </v-row>
      </v-container>
    </v-card>

    <v-card class="fieldset" outlined color="#EEEEEE" fluid>
      <v-card-title>
        <p class="font-weight-bold mb-0">Consulta</p>
      </v-card-title>

      <v-container fluid class="pb-0 mb-n4 my-n4">
        <v-row>
          <v-col cols="12" md="12">
            <v-data-table
              :headers="headers"
              :items="items"
              hide-default-footer
              class="tabelaHistoricoGeral elevation-1"
              :page.sync="page"
              :items-per-page="5"
              @page-count="pageCount = $event"
            >
              <template v-slot:top>
                <v-toolbar flat color="#EEEEEE">
                  <v-btn
                    color="secondary"
                    @click="editarAgenda = true"
                  >
                    <v-icon class="mr-2">mdi-pencil</v-icon>Editar
                  </v-btn>
                </v-toolbar>
              </template>

              <template v-slot:[`item.checkbox`]="{ item }">
                <v-simple-checkbox v-model="item.checkbox"></v-simple-checkbox>
              </template>
            </v-data-table>
            <v-pagination
              v-model="page"
              color="primary"
              :length="pageCount"
              class="transparent my-pagination"
            ></v-pagination>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-container>
</template>        

<style scoped>
.v-btn {
  font-weight: 300 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.7rem !important;
  width: 150px;
}
</style>
<script>
export default {
  components: {
  },

  data: () => ({
    page: 1,
    pageCount: 0,
   

    headers: [
      {
        text: "",
        align: "start",
        sortable: false,
        value: "checkbox",
        class: "tabelaHistoricoGeralHeader",
      },
      {
        text: "Parcela",
        align: "center",
        sortable: false,
        value: "parcelaa",
        class: "tabelaHistoricoGeralHeader",
      },
      {
        text: "Valor Inicial Risco",
        align: "center",
        value: "valorinicialriscoo",
        class: "tabelaHistoricoGeralHeader",
      },
      {
        text: "Valor Final Risco",
        align: "center",
        value: "valorfinalriscoo",
        class: "tabelaHistoricoGeralHeader",
      },
      {
        text: "Percentual",
        align: "center",
        value: "percentuall",
        class: "tabelaHistoricoGeralHeader",
      },
      {
        text: "Honorários Mínimos",
        align: "center",
        value: "honorariosminimoss",
        class: "tabelaHistoricoGeralHeader",
      }
    ],
    items: [],
    editedIndex: -1,
    editedItem: {
      parcelaa: "",
      valorinicialriscoo: 0,
      valorfinalriscoo: 0,
      percentuall: 0,
      honorariosminimoss: 0,
    },
    defaultItem: {
      parcelaa: "",
      valorinicialriscoo: 0,
      valorfinalriscoo: 0,
      percentuall: 0,
      honorariosminimoss: 0,
    },
  }),

  created() {
    this.initialize();
  },

  methods: {
    initialize() {
      this.items = [
        {
          parcelaa: "1",
          valorinicialriscoo: 159,
          valorfinalriscoo: 6.0,
          percentuall: 24,
          honorariosminimoss: 4.0,
        },
      ];
    },   
  },
};
</script>

Answer 1

In vuetify there is an event called click:row that you use in the tag v-data-table where you can place your function which will fill the form model with the desired information.

My answer was based on this here and can also be found in vuetify’s data-table documentation here.