如何在 vue 中仅显示对象的键值

Question

我有一个过滤消息并将过滤后的消息加载到页面上的 vue 应用程序。此时，用户可以在列表中选择消息，当前，与该消息（对象）关联的 json 数据正在页面上显示。我只想显示一部分 json 数据。消息数据如下所示：

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

允许我单击消息并将其显示到侧面的当前代码在这里：

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

此时，在上面的 v-sheet 中，我只想显示所选邮件的文件夹或传递时间或主题。我该怎么办？

Answer 1

将msg 对象绑定到<v-list-item>.value，以便选中的对象反映在<v-list-item-group> 的v-model 中。

还要注意key 不应该是一个对象，而是一个唯一的标识符。如果没有消息可以具有相同的DeliveryTime，那么key 就足够了。

你的<v-list-item> 应该是这样的：

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

然后model 将等于选定的消息对象，因此您可以在模板中显示它：

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

demo