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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
Advertisement
Answer
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" ...>