时间戳

首页 > 解决方案 > 如何为表格上的嵌套数据设置有效的道具路径 - Element UI - Vue JS

vue.js - 如何为表格上的嵌套数据设置有效的道具路径 - Element UI - Vue JS

问题描述

我正在尝试验证一个表单，其中一部分使用 element-ui 在表格中表示。但我不能将有效的道具传递给 el-form-item。

数据模型看起来像这样。

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>

第二个<el-form-item>因错误未验证

“错误：请传送一个有效的道具路径到表单项！”

我还尝试将以下内容作为道具传递

items.${scope.$index}.name

但这也没有用。有什么想法吗？

标签： vue.jsvuejs2frontendvue-componentelement-ui

解决方案

正确的路径是invoices[${index}].items[${scope.$index}].name

推荐阅读