CODEWITHSUNDEEP
vue.jsvuetify.jsv-data-table
Blacky_99
Blacky_99

Reputation: 185

Vuetify v-data table get Index

Hey there I am new to vue js and vuetify.In my editProductSave I want to pass another variable which is the index of the row in the table. This is my current code and how would i achieve that? The table is plotted using the vuetify v-data-table

Whole code

 <template>
      <v-card>
        <v-data-table
          :headers="tableFields"
          :items="programs"
          :items-per-page="5">
                <template v-slot:[`item._id.$oid`]="{ item }">
                  {{item._id.$oid}}
                </template>
                <template v-slot:[`item.tags`]="props">
                <v-edit-dialog
                  :return-value.sync="props.item.tags"
                  large
                  persistent
                  @save="editProductSave(props.item)">
                  <div>{{props.item.tags.length === 0 ? '' : props.item.tags}}</div>
                  <template v-slot:input>
                    <div class="mt-1 text-h2">
                      Update Tag
                    </div>
                    <v-text-field
                      v-model="props.item.tags"
                      label="Edit"
                      single-line
                      counter
                      autofocus
                    ></v-text-field>
                  </template>
                </v-edit-dialog>
                </template>

<script>
 import tdmApi from "../services/api/Database";

  export default {
    props: ["DatabaseList"],
    computed: {
      totalRows() {
        return this.programs.length;
      },
    },
    created () {
      this.viewTdmDatabase();
    },
    data () {
      return {
        tableFields: [
          {text:'ID',value:'_id.$oid'},
          {text:'Tag',value:'tags'},
        ],
        programs: [],
      }
    },
</script>

Upvotes: 1

Views: 9590

Answers (4)

jogarcia
jogarcia

Reputation: 2742

You can simply add the index to the programs in a computed property and import it in the data table like so:

template

...
<v-data-table
      :headers="tableFields"
      :items="programsComputed"
...

script

  export default {
    ...
    computed: {
      totalRows() {
        return this.programs.length;
      },
      programsComputed () {
        return this.programs.map((program, index) => {
          program.index = index;
          return program;
        })
      }
    },
    ...
    data () {
      return {
        tableFields: [
          {text:'ID',value:'_id.$oid'},
          {text:'Tag',value:'tags'},
        ],
        programs: [],
      }
    },

In your editProductSave(item) you would just have to call item.index

Upvotes: 0

Cerceis
Cerceis

Reputation: 850

<template v-slot:item.tags="{item,index}">
         {{index}} //Output index
</template>

The code above should work, make sure to cover it with object.

Upvotes: 4

LastM4N
LastM4N

Reputation: 2230

It seems that vuetify does not have in the v-data-table api the index field, so in order to get it you can change the structure of the v-data-table.

This is an example of how to get the index of each row.

https://www.codegrepper.com/code-examples/whatever/vuetify+v-data-table+get+row+index

Upvotes: 0

Beshambher Chaukhwan
Beshambher Chaukhwan

Reputation: 1448

Try the below code:

     <template v-slot:[`item.tags`]="{props, index}">
                <v-edit-dialog
                  :return-value.sync="props.item.tags"
                  large persistent
                  @save="editProductSave(props.item, index)">
                // ...
                </v-edit-dialog>
    </template>

And in script the method would be

methods: {
     editProductSave(item, index) {
        // ...
     }
}

Upvotes: 0

Related Questions