array within an array in Vuejs

Question

I have a data set which one of the values is another array and I am looping through the parents but when I get to the element that has another array I can't seem to get it to display. Here is relevant parts of my code.

I am looping through my columns as I am creating a table and I have a sorting function on the columns. Ideally I wouldn't want sorting on the elements column. I am getting things to output fine except for the columns which is where it is an array of items and not just a value. I want to go use a v-for on those elements so I can format that how I need. Tablefilter is a computed property that just sorts the data by filename.

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

Here is my data section. I left out my computed and methods as it shouldn't affect my issue.

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"
                }
            },
})

--- UPDATE --- If I put in the following code it will display all of the elements.

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

But if I try to output elem it will give an error that elem is not declared.

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

Answer 1

Maybe I'm totally wrong but why do you use a v-for on a <br>?

Try to replace it by a <div>:

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