Question

我有一个数据集，其中一个值是另一个数组，我循环通过父节点但是当我到达具有另一个数组的元素时，我似乎无法显示它。这是我的代码的相关部分。

我在创建表时循环遍历列，并且我在列上有一个排序功能。理想情况下，我不希望对元素列进行排序。我输出的东西很好，除了列是一个项目数组而不仅仅是一个值。我想在这些元素上使用v-for，这样我就可以根据需要进行格式化。 Tablefilter是一个计算属性，只按文件名对数据进行排序。

<table id="assets">
        <thead>
        <tr>
            <th v-for="(head, key) in columns" v-on:click="sort(key)" v-bind:class="{active: sortkey == key}" nowrap>
                ${head['displayname']}
                <span v-bind:class="['arrow', sortorders[key] > 0 ? 'asc' : 'dsc']"></span>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in tableFilter">
            <td v-for="(head, key) in columns">
                <span v-if="head.displayname != 'Elements'">${item[key]}</span>
                <span v-else>


                    //This is where I need help
                    <br v-for="element in item[key]">
                        ${element}
                    </br>


                </span>
            </td>
        </tr>
        </tbody>
    </table>

这是我的数据部分。我遗漏了我的计算机和方法，因为它不应该影响我的问题。

var vm = new Vue({
        el: '#assets',
    delimiters: ['${', '}'],
    data: {
        sections: [
            {
                id: 1378,
                filename: 'test.DOC',
                kind: 'word',
                size: '18182',
                elements: [
                    {
                        elementId: 1393,
                        title: 'Test title',
                        mls: 'November 2016: abc123',
                        owner: 'John Doe',
                        expires: '2017-11-01 05:00:00'
                    },
                ]
            },
            {
                id: 1383,
                filename: 'test.pdf',
                kind: 'pdf',
                size: '934406',
                elements: [
                    {
                        elementId: 1389,
                        title: 'test title 2',
                        mls: 'July 2017; 123',
                        owner: 'Jane Doe',
                        expires: '2018-07-01 05:00:00'
                    }, {
                        elementId: 1390,
                        title: 'test title 3',
                        mls: 'July 2018; 456',
                        owner: 'Jack Doe',
                        expires: '2018-07-01 06:00:00'
                    }
                ]
            }
        ]
    },
            columns: {
                id : {
                    displayname : "Id"
                },
                filename : {
                    displayname : "File Name"
                },
                kind : {
                    displayname : "Kind"
                },
                size : {
                    displayname: "Size"
                },
                elements : {
                    displayname: "Elements"
                }
            },
})

---更新--- 如果我输入以下代码，它将显示所有元素。

<br v-for="elem in item[key]">
                        ${item[key]}
                    </br>

但是如果我尝试输出elem，它将给出一个错误，即elem未被声明。

<br v-for="elem in item[key]">
                        ${elem}
                    </br>

Answer 1

也许我完全错了，但为什么要在<br>上使用v-for？

尝试将其替换为<div>：

<div v-for="elem in item[key]" :key="item.id">
    ${elem}
</div>

Vuejs中数组中的数组

1 个答案: