Exploring keys rather than values in Vue application

Currently, I am facing an issue where I am retrieving the values for three keys from my API using Axios. However, each time I make a request, the values are being displayed four times for each key. After removing one key from my data models and retesting, I discovered that the request is now displaying three times instead of four. It seems like I am inadvertently iterating over the keys instead of just getting the values.

I am working with Nuxt, Django, and Axios. How can I modify this code to only display the values of each key without repetition? This is the JSON data returned by Axios:

{"id":1,"balance":10.0,"exposure":7.0,"free_funds":80.0}

Is there a way to extract only the values for each paragraph tag, rather than having them repeat four times?

<template>
    <div class="container">
      <h2>Current Balance</h2>
      <ul class="trendings">
        <li v-for="result in results" :key="result">
          <p>{{ results.balance }} balance</p>
          <p>{{ results.free_funds }} free_funds</p>
          <p>{{ results.exposure }} exposure</p>
        </li>
      </ul>
    </div>
  </template>


  <script>
  import axios from "axios";
  export default {
    asyncData() {
      return axios.get("http://localhost:8000/api/balance/1").then(res => {
        return { results: res.data };
      });
    }
  };
  </script>

Answer №1

In the case where the JSON response is structured as follows:

{"id":1,"balance":10.0,"exposure":7.0,"free_funds":80.0}

There is no need to use the v-for directive as there is only one item to loop over.

If you do require a v-for, ensure that the data is returned as an array by enclosing it in square brackets like this:

[ {"id":1,"balance":10.0,"exposure":7.0,"free_funds":80.0} ]

Therefore, your code should be modified to:

return { results: [res.data] };

Answer №2

Check out the official documentation

 <li v-for="(result, key) in results" :key="result">
      <p>{{ result }} {{ key }}</p>
 </li>

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

Why is it that PowerShell cannot execute Angular commands?

Recently, I started diving into Angular and encountered an issue using PowerShell in Windows. Every time I run an angular command like: ng new new-app or ng serve I keep getting this error message: ng : File C:\Users\< username >\ ...

The responsiveness of Vuetify's v-data-table is compromised when utilizing the v-slot:body feature

Issue with Vuetify v-data-table not stacking on mobile devices when using the body v-slot Is there a way to make the data table stack properly even when it has the body v-slot implemented? The normal behavior of a v-data-table can be seen in the Vuetify d ...

Update nested child object in React without changing the original state

Exploring the realms of react and redux, I stumbled upon an intriguing challenge - an object nested within an array of child objects, complete with their own arrays. const initialState = { sum: 0, denomGroups: [ { coins: [ ...

Obtain the value of a checkbox using jQuery

Here is an example of dynamic checkboxes: <input type="checkbox" checked="checked" value="1" name="user_mail_check[]" class="ami"> <input type="checkbox" checked="checked" value="2" name="user_mail_check[]" class="ami"> <input type="checkbo ...

What is the reason for not modifying the filtered and sorted data?

I am currently working on implementing filter options for an item list, but I am facing an issue where the filtering does not work when selecting dropdown options. Array in App.jsx const cameraShowList=[ {id:1,model:"Canon",title:"Canon ...

Run a Node command when the button is clicked

I am developing a web application where I need to run a node command upon clicking a button. Instead of manually executing the node command in the command line, I want it to be triggered by a click on the front end. For example: $( ".button_class" ).on( ...

What are the methods for altering the material of a glTF model using THREE.js?

I've created a model using Blender and baked all the lighting and textures. However, when I import it into THREE.js in .glb format, it automatically uses the standard material. While this may work in certain cases, my concern is that I want to retain ...

What is the most efficient method for referencing nested descendants with ref in Vue? (Ancestor - Parent - Child)

Due to the unique project structure that cannot be changed, I am faced with the need to retrieve a value from a grandfather component all the way down to the grandson (Grandfather to Son's son relationship). The following code snippet illustrates this ...

Is there a way to determine the number of options required for a select tag to become scrollable?

Please review these two <select> elements: <select> <option>one</option> <option>one</option> <option>one</option> <option>one</option> <option>one</option> <option&g ...

Sending information from React JS to MongoDB

I am currently facing a challenge in sending data from the front-end (react js) to the back-end (node js), and then to a mongodb database for storage. While I have successfully called the server with the data, I am encountering an issue when attempting to ...

Guide to Displaying HTTP POST Request Response on Pug Template

Whenever a user interacts with the form, I initiate an HTTP POST request to the database server. Subsequently, the database server sends a POST request back to the user's server. The issue I am facing is the inability to display this database result ...

Using Javascript to Showcase a Video's Number of Views with Brightcove

How can I show the number of views for a video without using Brightcove's player? Brightcove Support shared this resource: , but I'm having trouble understanding it. ...

Error: EPERM -4048 - the system is unable to perform the operation specified

Every time I attempt to install a package using npm install, I encounter an error message (usually referring to a different path). I have attempted running npm cache clean, restarting my computer, and checking for any processes that may be interfering with ...

Confusion between modules and classes in Node.js when using CoffeeScript

I'm struggling to understand how to use Protoype in CoffeeScript, even though I am familiar with using it in standard Javascript with Node.js and modules. Imagine I have a file named mymodule.coffee: Module = {} class MyModule constructor: (para ...

Working with masonry does not involve filling tiny crevices

Check out the DEMO here Experience the FULL Screen DEMO An issue with Masonry: it's not filling small gaps even when there is available space. For example, in a main container with a width of 896px; next to the first container with an orange backgr ...

Having trouble retrieving information from Node.js service in AngularJS 2

I am currently expanding my knowledge of Angular and attempting to retrieve data from a node js service using Angular 2 services. When I access the node js services directly from the browser, I can see the results. However, when I attempt to fetch the dat ...

What's the reason behind the console showing an uncaught promise error message?

When attempting to delete some lists from my backend using a fetch request, I encountered an issue. The console is displaying an error message that reads "Uncaught (in promise)." What could be causing this problem? Here is the frontend code snippet for th ...

Is there a similar feature to RxJs version 4's ofArrayChanges in RxJs version 5?

Currently utilizing Angular2 and attempting to monitor changes in an array. The issue lies with only having RxJs5 available, which appears to lack this specific functionality. ...

What steps do I need to take to deploy my React app onto a server?

I recently completed creating my first website with React and now I want to upload it to my server (HostGator). Can anyone guide me on how to do that? Thank you. ...

The issue with $.parseJSON when encountering double quotes

Could someone please clarify why a JSON string with double quotes can disrupt the functionality of $.parseJSON? This example works: [{"type":"message","content":{"user":"tomasa", "time":"1321722536", "text":"asdasdasd"}}] And so does this one: [{"type" ...