Vue.Js：如何在JSON中遍歷子對象

Question

我正在嘗試從json文件的表中創建一個簡單的電子郵件列表。 這是JSON電子郵件數據的前兩位：

    [{
    "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."
    }]

這是從文件導入的JSON，我可以像這樣在組件中訪問它：

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

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

然后將它們放在表中，我像這樣遍歷它：

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

在大多數情況下，它運行良好，但是，當我到達第一個對象的to字段時，將得到以下輸出：

我想要做的是能夠遍歷該數組，對其進行計數並像這樣顯示它：

由於某種原因，它似乎是以字符串形式輸出的。

我如何獲取它還可以遍歷該子對象，以便可以對其執行操作，例如count等。

編輯：當我嘗試做一個簡單的.length ：

{{ data.to.length }}

我得到：

第一個似乎是正確的，我很希望2 。 但我不希望第二個有24個，因為只有1個項目。

Answer 1

嗯..問題是：

• 我的第二項不在數組中： "to": "ntregensoe1@bluehost.com" 。 因此，當我獲得24的值時，我只是假設代碼無法正常工作。

當我在JSON中修復該錯誤時，可以使用：

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