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

Posted 2023-02-22

【中文标题】如何在 vue 中仅显示对象的键值

【英文标题】：How to just display a key value from an object in vue

【发布时间】：2021-09-25 12:09:54

【问题描述】：

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

   
        "folder": "A",
        "DeliveryTime": 1412343780000,
        "MsgFrom": "[e-mail]",
        "MsgTo": "[e-mail]",
        "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 中，我只想显示所选邮件的文件夹或传递时间或主题。我该怎么办？

【问题讨论】：

这能回答你的问题吗？ How to get a subset of a javascript object's properties

【参考方案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