How can I simply show a specific value from an object in Vue?

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?

javascriptarraysvue.jsvue-componentvuetify.js

Answer №1

Associate the msg object with <v-list-item>.value to ensure that the chosen object is represented in the <v-list-item-group>'s v-model.

Additionally, remember that the key should be a unique identifier, not an object. If each message has a distinct DeliveryTime, using it as the key would suffice.

Below is how your <v-list-item> should be structured:

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

The model will then represent the selected message object, allowing you to display it in the template:

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

demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery AJAX request is not returning a truthy value when parsing

On my website, I am dealing with a large form and using the serialize() method to process it. However, I have encountered an issue: After completing the form, the result always returns false. I checked this using Firebug. Even though data.ok == true has ...

javascriptjqueryajax

Developing dynamic 3D cubes

In my latest project, I am attempting to construct a unique structure composed of 3D cubes arranged in a stacked formation. Each of the individual cubes within this structure is designed to be interactive for users. When a user hovers over a cube, it trigg ...

javascriptjquerycanvas3d

Execute async functions sequentially with a queue and limit to only one function running at a time

Within my javascript code, there is an async function named generateThumbnail. This function is triggered by a specific event, such as clicking on a button. The issue I'm facing is that running the function multiple times concurrently leads to a memor ...

javascriptnode.js

Retrieve the values of a particular key from your Django queryset JSON data and then seamlessly send them over to VueJS

I recently developed a web app using Django2 with Vue for the frontend. I encountered an issue in passing all values of a specific key from JSON data to a JavaScript dictionary value on the frontend. Despite trying to use the += operator to add the data, I ...

javascriptdjangovue.js

Different ways to verify if a Checkbox is selected within a table

As a newcomer to reactjs, I have a component that renders two tables with different data using the same component and passing data through props. Each table has checkboxes for selection. If a user selects items from both tables, I want to detect if they ha ...

javascriptreactjs

What are the steps to creating an API for a web application?

I have been tasked with creating an API for my web application that will utilize another website's authentication system. While I have a basic understanding of JavaScript, PHP, and HTML, I need guidance on how to proceed with building the API. Here i ...

javascriptphphtmlapiweb-applications

Struggling with a peer requirement for grunt@~0.4.0 during the installation of grunt plugins? Here's how to resolve

I recently tried to set up some Grunt plugins such as grunt-contrib-clean and grunt-contrib-watch using the commands npm install grunt-contrib-clean --save-dev and npm install grunt-contrib-watch --save-dev However, I encountered the following warnings: n ...

javascriptnpmgruntjsgrunt-contrib-watchgrunt-plugins

Having difficulty executing the Cypress open command within a Next.js project that uses Typescript

I'm having trouble running cypress open in my Next.js project with Typescript. When I run the command, I encounter the following issues: % npm run cypress:open > [email protected] cypress:open > cypress open DevTools listening on ws: ...

javascripttypescripttestingnext.jscypress

Issue encountered while attempting to utilize the concat method to condense an array

Describing the Problem: I am facing a challenge with flattening an array of sales data. Each element in the array contains an ID, sale code, seller username, timestamp, and details which include an array of products, quantities, and subtotals for each item ...

javascriptarraysexpressmongooseflatten

What is the process for obtaining a new token in a Linnworks embedded application?

I decided to share my issue on this platform since the support from Linnworks is virtually non-existent. My dilemma involves a private embedded app created within Linnworks that showcases orders in spreadsheet format. The app, constructed using Vue.js and ...

javascriptvue.jstoken

When passing req.body to another file for processing, it is displaying as undefined in node.js

Currently tackling an issue with a project involving nodejs where the request body is showing up as undefined Fetching some data on the client side, but encountering difficulties Received an error pointing out that the property is either undefined or nul ...

javascriptnode.jsexpress

Retrieve data from two databases and display the information from two separate arrays on a single ejs page after making two separate database calls

Currently, I am faced with a challenge where I need to render a page by passing two arrays that are populated by two separate database calls. It seems that when I only pass one array to the ejs page, everything works as expected. For a single array, my a ...

javascriptdatabaseexpressejsrender

What causes the appearance of an HTTP header error and how can we identify the bug?

I tried to convert XML to JSON using two files which are included here. However, I keep encountering an error. Despite searching on SO for solutions, I haven't been able to find the answers. main.js /** SET ENGINE TO PUG */ app.set("views", ...

javascriptnode.jsexpresspug

Axios error in Express middleware - unable to send headers once they have been processed

I can't seem to figure out why my code is not running correctly. While using Axios in my middleware, I am encountering this error message: Error: Can't set headers after they are sent. This is the snippet of my code (utilizing Lodash forEach): ...

javascriptexpressasynchronousasync-awaitaxios

Store the content of an HTML div using HTML5 Drag and Drop functionality in a MYSQL database

Here's a simple scenario: I have 3 small divs (1, 2, 3) and I want to place them inside 3 other divs (4, 5, 6). That's no issue, but then I need to store the data in MySQL, such as 4-1, 5-2, 6-3 for instance. I can use JavaScript to display the n ...

javascriptphpmysqlhtmldrag-and-drop

What is a method to adjust the height of a paragraph element in AngularJS based on user interaction?

Is there a way to dynamically adjust the height of a paragraph element in Angular when clicking on a "Show More" button? I want the button text to change to "Show Less" and shrink the paragraph back down when clicked again. What would be the most effective ...

javascripthtmlangularjs

Problem with jQuery ajax: Sending an array doesn't work

I am attempting to transmit an array of data via AJAX to save it to the database. This is how I construct the array: $( "#saveordering" ).button().click(function( event ) { event.preventDefault(); var data = document.getElementByI ...

javascriptjqueryajax

Words next to picture

Can someone help me with aligning different images of varying widths but the same height inline with text next to each image? I tried to do it, but it doesn't look good on responsive screens. Any suggestions on how to fix this? And if there's a b ...

javascripthtmlcsstwitter-bootstrap

Integrating jQuery Tooltip with Mouseover Event

I'm currently involved in creating a map of MIT projects for an architectural firm, and facing the challenge of maintaining the red dots mouseover state even when the mouse hovers over the tooltips that appear. Presently, the mouseover effect turns of ...

javascriptjqueryhtmlcsstooltip

When Infinite Scroll is integrated into another file with HTML tags stacked on top, it will not load additional posts when scrolling down

I have implemented an Infinite Scroll feature that dynamically loads more data from a database as users scroll to the bottom of the page. However, I encountered an issue when trying to include this functionality in another .PHP file. If I insert any HTML ...

javascriptphp