如何只显示来自vue中对象的键值

Question

我有一个 vue 应用程序，它过滤消息并将过滤后的消息加载到页面上。此时，用户可以 select 列表中的消息，目前，与该消息（对象）关联的 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 中，我只想显示 selected 消息的文件夹或传递时间或主题。我该怎么做？

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

如何只显示来自vue中对象的键值

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

javascript

arrays

vue.js

vue-component

vuetify.js