Vue.js 如何为表元素UI-Vue JS上的嵌套数据设置有效的prop路径

我正在尝试验证一个表单，其中一部分是使用元素ui在表中表示的。但是我无法将有效的道具传递给el表单项

数据模型如下所示

form: {
    invoices: [
        {
            amount: '',
            items: [{ name: '', value: '' }]
        }
    ]
}

在html部分，我有如下内容：

<template v-for="(invoice, index) in form.invoices">
    <el-form-item :prop="`invoices.${index}.amount`" :rules="rules.invoiceAmount">
        <el-input/>
    </el-form-item>
    <el-table :data="invoice.items">
        <el-table-column prop="name">
            <template scope="scope" slot-scope="scope">
                <el-form-item :prop="`invoices.${index}.items.${scope.$index}.name`" :rules="rules.items">
                    <el-input/>
                </el-form-item>
            </template>
        </el-table-column>
    </el-table>
</template>

---

但这也不起作用。有什么想法吗？

正确的路径应该是

发票[${index}]。项目[${scope.$index}]。名称

发票[index]。金额

？@destoryer发票金额的验证工作正常。此

：prop=“

invoices.${index}.amount

”

引发错误的是表中的项目名称字段。因此，基本上该项目名称的路径类似于invoices.index.items.itemIndex.item，对吗？我不明白为什么要使用字符串模板文字。我将替换

发票。${index}.items。${scope.$index}.name

和

发票.items[index].name

，根据它们的文档，prop实际上是一个字符串，它表示所引用模型的键（而不是实际值）。如果我传入您的建议，则不会显示错误，但验证仍然不存在。对于固定道具，验证有效，因此这只是路径问题

items.${scope.$index}.name