Vue.Js：如何在JSON中遍历子对象

Question

I am trying to create a simple email list in a table from a json file. Here is the first two bits of the JSON email data:

    [{
    "from": "tevery0@howstuffworks.com",
    "to": ["mdonisthorpe0@google.cn", "efinker1@chron.com"],
    "subject": "Expanded modular website",
    "attachment": [{
        "filename": "dummyfile.pdf",
        "location": "https://fakelink.com"
        },
        {
        "filename": "dummyfile_two.pdf",
        "location": "https://fakelink.com"
        }
    ],
    "date": "2017/09/18",
    "body": "Morbi non lectus. Aliquam sit amet diam in magna bibendum imperdiet. Nullam orci pede, venenatis non, sodales sed, tincidunt eu, felis.\n\nFusce posuere felis sed lacus. Morbi sem mauris, laoreet ut, rhoncus aliquet, pulvinar sed, nisl. Nunc rhoncus dui vel sem."
    }, {
    "from": "efinker1@chron.com",
    "to": "ntregensoe1@bluehost.com",
    "subject": "Optional tertiary task-force",
    "attachment": [{
        "filename": "dummyfile.pdf",
        "location": "https://fakelink.com"
        },
        {
        "filename": "dummyfile_two.pdf",
        "location": "https://fakelink.com"
        }
    ],
    "date": "2019/03/25",
    "body": "Sed ante. Vivamus tortor. Duis mattis egestas metus.\n\nAenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh.\n\nQuisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est. Donec odio justo, sollicitudin ut, suscipit a, feugiat et, eros."
    }]

This is an imported JSON from a file, and I access it in my component like so:

<script>
import messages from '../assets/dummy_email_data.json'

export default {
 data() {
  return {
    messages: messages,
 };
},
</script>

and then to get them in a table, I am looping through it like so:

<tbody>
    <tr v-for="(data, index) in messages" :key="index">
        <td>{{ data.from }}</td>
        <td>{{ data.to }}</td>
        <td>{{ data.subject }}</td>
        <td>{{ data.date }}</td>
    </tr>
</tbody>

For the most part it works fine, however, when I get to the to field on the first object I get this output:

What I want to do is to be able to loop through that array, count it and display it like so:

For some reason it seems be be outputting that as a string.

How do I get it to also loop through that child object so I can perform actions on it, like count etc...

Edit: when I try and do a simple .length :

{{ data.to.length }}

I get:

The first one appears to be right, well I would expect 2 . but I would not expect 24 for the second one as there is only 1 item.

Answer 1

Ah.. The issue was:

• My second to item was not in an array: "to": "ntregensoe1@bluehost.com" . So when I was getting the value of 24 I was just assuming the code was not working.

When I fix that in the JSON I can then use:

<td>{{ data.to[0]}} <span v-if="data.to.length > 1">+ {{ data.to.length - 1 }}</span></td>