Tips on displaying Vue objects row by row

Question

Tips on displaying Vue objects row by row

I am currently working on a Vue application where I want to display each 'object' in its own table row. However, I'm facing an issue where the objects are being displayed in one column or as separate rows. Is there a way to ensure that '0 BTC AUD 14,745.3' appears in the first row and the next object '1 ETH AUD 312.14' is shown in the second row? As someone new to Vue, I would appreciate any assistance. Thank you!

Below is an image link and the code snippet:

https://i.sstatic.net/ZBoHy.png

<template>
<div class="main">
  <div id="container" v-for="(index) in coin" :key="index">
    <table class="coins">
      <thead>
        <tr class="header">
          <th>Rank</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <td>{{ index }}</td>
      </tbody>
    </table>
  </div>
</div>
</template>

<script>
import axios from 'axios'
var limit = 20

export default {
  name: 'ex',
  data: () => ({
    coin: []
  }),

  created () {
    axios.get('https://min-api.cryptocompare.com/data/top/totalvolfull?limit=' + limit + '&tsym=AUD')
      .then(response => {
        for (var i = 0; i < limit; i++) {
          this.coin.push(i, response.data.Data[i].CoinInfo.Name, response.data.Data[i].DISPLAY.AUD.PRICE)
          // console.log(this.coin[i])
        }
      })
      .catch(e => {
        this.errors.push(e)
      })
  }
}
</script>

javascript vue.js

Answer 1

Answer №1

To improve the way data is added to your array of coins, consider pushing a single item (array or object) that contains all necessary information in each iteration instead of three separate items. Additionally, rename the array from coin to coins for better code clarity. Here's an example of how you can make these changes:

this.coins.push([i, response.data.Data[i].CoinInfo.Name, response.data.Data[i].DISPLAY.AUD.PRICE])

Next, update the iteration in your template like so. Modify the v-for directive as shown below:

<div id="container" v-for="(coin, index) in coins" :key="index">

Then, adjust the content display in the template:

<tbody>
     <td>{{ coin[0] }}</td>
     <td>{{ coin[1] }}</td>
     <td>{{ coin[2] }}</td>
</tbody>

While I haven't tested this specific code, I believe these suggestions will help steer you in the right direction.

Answer 2

To improve the way data is added to your array of coins, consider pushing a single item (array or object) that contains all necessary information in each iteration instead of three separate items. Additionally, rename the array from coin to coins for better code clarity. Here's an example of how you can make these changes:

this.coins.push([i, response.data.Data[i].CoinInfo.Name, response.data.Data[i].DISPLAY.AUD.PRICE])

Next, update the iteration in your template like so. Modify the v-for directive as shown below:

<div id="container" v-for="(coin, index) in coins" :key="index">

Then, adjust the content display in the template:

<tbody>
     <td>{{ coin[0] }}</td>
     <td>{{ coin[1] }}</td>
     <td>{{ coin[2] }}</td>
</tbody>

While I haven't tested this specific code, I believe these suggestions will help steer you in the right direction.

Answer 3

Answer №2

Perhaps consider updating how the object was created

Instead, try this approach:

this.coin.push(i, response.data.Data[i].CoinInfo.Name, response.data.Data[i].DISPLAY.AUD.PRICE)

Try something similar to this:

const coinObject = {
  index: i,
  name:response.data.Data[i].CoinInfo.Name,
  price: response.data.Data[i].DISPLAY.AUD.PRICE
}
this.coin.push(coinObject);

Then you can iterate through it in your template with a loop like this:

 <div id="container" v-for="(coinItem, index) in coin" :key="index">
    <table class="coins">
      <thead>
        <tr class="header">
          <th>Rank</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <td>{{ coinItem.index }}</td>
        <td>{{ coinItem.name }}</td>
        <td>{{ coinItem.price }}</td>
      </tbody>
    </table>
  </div>

Answer 4

Perhaps consider updating how the object was created

Instead, try this approach:

this.coin.push(i, response.data.Data[i].CoinInfo.Name, response.data.Data[i].DISPLAY.AUD.PRICE)

Try something similar to this:

const coinObject = {
  index: i,
  name:response.data.Data[i].CoinInfo.Name,
  price: response.data.Data[i].DISPLAY.AUD.PRICE
}
this.coin.push(coinObject);

Then you can iterate through it in your template with a loop like this:

 <div id="container" v-for="(coinItem, index) in coin" :key="index">
    <table class="coins">
      <thead>
        <tr class="header">
          <th>Rank</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <td>{{ coinItem.index }}</td>
        <td>{{ coinItem.name }}</td>
        <td>{{ coinItem.price }}</td>
      </tbody>
    </table>
  </div>

Tips on displaying Vue objects row by row

Answer №1

Answer №2

Similar questions

Handling errors in XMLHttpRequest using Axios in React JS

Send data using only Javascript

Physically moving the window to a specified location using window.scrollTo()

Capture the onclick attribute with jQuery and then reapply it

Challenge yourself with the act of dragging and dropping multiple times using only Javascript

Obtain the position of a value within an array that has been grouped together

When attempting to refresh the page, an error occurred stating: 'Unhandled TypeError: Cannot access properties of undefined (reading FetchApi.js:23 'data')'

A more efficient method for creating node.js functions to read and write files

What is the best way to send props from page.js to layout.js in the Next.js app directory?

Include the root prefix in angular.json

Using wildcards in the path of a route is a great way to

Adjust the height of a div containing variable elements

Personalized Design Incorporating Sections and Sidebars

Elements are unresponsive to scrolling inputs

Choosing sub-elements in CSS

jQuery's addClass() method behaving unexpectedly when used within an if statement

NgMap Angular Pins

Managing API calls through Next.js routing

Replicate styling while copying CodeMirror code

Give precedence to several concurrent rules