How to get the index value from vi-for

Hi,

i'm strunggling to get the correct value from v-for.

        data() {
            return {
                categories: [],
                category_update: {},
                editing: 0
            }
        },
        created() {
            this.categories();

        },
        methods: {
           
            categories() {
                axios.get('/api/categories')
                    .then(response => {
                        this.categories = response.data.data;
                    });
            },
            editCategory(index){
                this.editing = index;
                this.category_update = this.categories[this.editing];
                console.log('Edited ' + this.editing);
            },
            cancelEditing(index){
              this.editing = 0;
                console.log('Cancel ' + index);
            }
       }
  }

And in the template :

<tr v-for="(category, index) in categories" :key="category.id">
	<th scope="row">{{ index + 1 }}</th>
<td>
	<a href="#" class="btn btn-primary btn-sm"
		@click.prevent="editCategory(index +1)" v-if="editing !== index +1">
  		<i class="flaticon-edit-1"></i> Edit
	</a>
</td>
</tr>

The issue I have is the Index which is giving me the wrong ID. When I click on edit, calling the function editcategory(indexbut the bind value is from the second entry not the first.

I would say it's normal because I do the index + 1it's the same thing when using category.id.

On my VUEJS devtools, the category_update value id is 2 for the index 1.

Can someone point me to the right direction ?

rss

6 years ago

Level 2

Javascript array indexes start from 0 while indexes in database are always 1 or more. You can remove all + 1 additions, just use the index and default editing to null. Or you can use category id instead of array index.

So array indexes and databases indexes have nothing to do with each other, more than often they don't have same values.

nolros

6 years ago

Level 23

@artizan if the data is a Laravel model then just return the id in your @click or if I read it right just return the category object as such

@click.prevent="editCategory(category)"

component

        editCategory(category){
                // PS camelcase is best with JS i.e. categoryUpdate
                this.category_update = category; 
         },

if you want the id then just do the following:

@click.prevent="editCategory(category)"

component

        editCategory({id}){
		// using lodash but you can use common JS filter, foreach, etc
                this.category_update = _.find(this.categories, (c) => c.id === id);
         },

artizan

6 years ago

Level 3

Thanks for the replies guys,

Both method are working fine so I used the null method and using the Laravel model to have the data from the editing method.

data() {
            return {
                categories: [],
                category_update: {},
                editing:  null 
            }
        },

editCategory(category){
                
                this.category_update = category; 
         },

Easy to manage

@nolros @rss thank you!

1 like

Please or to participate in this conversation.