How to just display a key value from an object in vue

Question

I have a vue application that filters through messages and loads the filtered messages on a page. At that point, the user can select the message within a list and currently, the json data associated with that message(object) is displaying on the page. I would like to just one part of the json data to display. Here is what a message data looks like:

   {
        "folder": "A",
        "DeliveryTime": 1412343780000,
        "MsgFrom": "example@gmail.com",
        "MsgTo": "example_two@gmail.com",
        "Subject": "Sample Subject",
    }

The current code that I have that allows me to click on a message and displays it to the side is here:

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

At this point, within the v-sheet up above, I would like to only display the folder or the delivery time or the subject of the selected message. How would I go about that?

Does this answer your question? [How to get a subset of a javascript object's properties](https://stackoverflow.com/questions/17781472/how-to-get-a-subset-of-a-javascript-objects-properties) — Dexygen, Jul 16 '21 at 17:59

score 1 · Accepted Answer · answered Jul 16 '21 at 22:23

Bind the msg object to <v-list-item>.value so that the selected object is reflected in <v-list-item-group>'s v-model.

Also note the key should not be an object, but rather a unique identifier. If no messages could have the same DeliveryTime, that would be sufficient for key.

Here's what your <v-list-item> should look like:

<v-list-item v-for="msg in selectedMessages"
             :key="msg.DeliveryTime"
             :value="msg">

Then model would be equal to the selected message object, so you could show it in your template:

<v-sheet>
  <h2>Subject: {{model.Subject}}</h2>
  <p>Folder: {{model.folder}}</p>
  <p>Delivery time: {{model.DeliveryTime}}</p>
</v-sheet>

demo

How to just display a key value from an object in vue

1 Answers1