Vue 2.6.10 - 如何修复 v-for 循环中的"属性或方法"索引"未在实例上定义

Question

我创建了一个数据表，它将从API获取数据并很好地显示它。我希望用户能够双击任何行，并弹出一个显示该行信息的模态组件。

数据是一个对象数组：

[
{ 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' },
]

我尝试将对象直接绑定到组件，使表的各个部分成为自己的组件，使用$emit，现在使用 for 循环和索引中的原始值，但对我来说没有任何用处。

这是我在制作标题后用来创建表的方法：

<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>

这是我的组件：

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

模板只是它应该是什么样子的线框。

我希望modaldata包含该行对象中的所有数据，但我没有得到定义，我目前得到的错误是：

[Vue 警告]：属性或方法"index"不是在实例上定义的，而是在渲染过程中引用的。通过初始化属性，确保此属性在 data 选项中或对于基于类的组件是反应性的。请参阅：https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

Answer 1

我已经设法解决了我自己的问题：

我通过在v-on:dblclick="showModal = true; getModalData(index)"上制作一种方法来解决这个问题 该方法将父data部分中名为curentModalData的变量设置为模式可以绑定到sortedvalues[index]：

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