I've created a Vue application that filters messages and displays them on a page. Currently, when a user selects a message from the list, the entire JSON data associated with that message is shown on the page. However, I want to only display a specific part of the JSON data. Here's an example of what a message's data structure looks like:
{
"folder": "A",
"DeliveryTime": 1412343780000,
"MsgFrom": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="701508111d001c15e131f1d">[email protected]</a>",
"MsgTo": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8e938a869b9c84ab8c8687">[email protected]</a>",
"Subject": "Sample Subject"
}
The current code allows users to click on a message and view its content on the side panel, as shown below:
<v-list-item-group
v-model="model"
color="indigo">
<v-list-item
v-for="msg in selectedMessages" :key="msg">
<v-list-item-content>
<v-list-item-title>
<strong>{{msg.Subject}} </strong>
</v-list-item-title>
<v-list-item-subtitle>
{{msg.MsgFrom}}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
<v-sheet>
{{selectedMessages[model]}}
</v-sheet>
In the above v-sheet section, I only want to display either the folder, delivery time, or subject of the selected message. How can I achieve this?