Vue 2.6.10 - How to fix 'Property or method “index” is not defined on the instance but referenced during render.' in v-for loop

Question

I've created a data table that will take data from an API and display it nicely. I want the user to be able to double click on any row and have a modal component pop up that displays the information of that row.

The data is an array of objects:

[
    { text: 'some data 1', value: 'some info 1' },
    { text: 'some data 2', value: 'some info 2' },
    { text: 'some data 3', value: 'some info 3' },
    { text: 'some data 4', value: 'some info 4' },
]

I've tried binding the object to the component directly, making the parts of the table their own components, using $emit, and now using the original value from the for loop and an index but nothing has worked for me.

This is what I use to create the table after I make the headers:

<tr class="notheader" v-for="(sortedobject,index) in sortedvalues"
    v-on:dblclick="$emit('open', sortedobject); showModal = true;">
    <!-- Many <td></td> -->
    <modal v-bind:modaldata="sortedvalues[index]" v-on:close="showModal = false" v-if="showModal">
        <h1 slot="header">Nonsense header</h1>
    </modal>
</tr>

This is my component:

var Child = {
    template: '#modal-template',
    props: ['modaldata'],
    mounted: function () {
        this.$parent.$on('update', this.setValue);
    }
};

The template is just a wireframe of what it should look like.

I expect modaldata to contain all the data from the object for that row, but I get undefined and the error I am currently getting is:

[Vue warn]: Property or method "index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Not enough information. Based on the error message, there should be a place where you wrote this.index. — yqlim
Personally, I'd use :modaldata="sortedobject". Do you get the same error message if you do that? Also, what component is triggering the error? What does your #modal-template look like? — Phil
Phil - My template looks like this link and the error message is the same as before if I changed v-bind:modaldata="sortedvalues[index]" to :modaldata="sortedobject" except "index" has been replaced with "sortedobject" Yong Quan - I've searched through my entire project and this.index is never written anywhere. — Dovin John

Dovin John Dovin John · Accepted Answer · 2019-07-24T17:23:23

I've managed to solve my own issue:

I solved this by making a method on v-on:dblclick="showModal = true; getModalData(index)" The method sets a variable named curentModalData in the parent data section to sortedvalues[index] which the modal can bind to:

<modal v-bind:modaldata="curentModalData" ...>

Vue 2.6.10 - How to fix 'Property or method “index” is not defined on the instance but referenced during render.' in v-for loop

1 Answers