如何逐行打印Vue对象

Question

我有一个Vue应用程序，我试图在它自己的表行中显示每个'object‘。但是，我只能让它在一个列中显示每个对象，或者我可以将其设置为每个元素都在自己的行中(如下图所示)。如何使'0 BTC 14,745.3‘在第一行，然后下一个对象'1 ETH AUD 312.14’显示在第二行。我是Vue的新手，我想知道是否有人能帮助我

我已经附上了下面的图片以及我的当前代码，谢谢！

​

​

<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>

Answer 1

更改将数据推入硬币数组的方式，因为在每次迭代中，您都会将三个项(索引、硬币名称和值)推入数组中，但您要做的是将包含所有这些信息的单个项(数组或对象)推送到数组中。为了代码清晰，还将coin数组的名称更改为coins。像这样的事情应该有效：

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

然后更改模板中的迭代。第一件事是将v-for改为如下所示：

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

然后当你打印内容时：

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

我没有测试这个，但我希望这个总体想法足以让你走上正确的方向。

Answer 2

也许改变一下你是如何创建这个对象的

相反，请这样做：

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

做这样的事

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

然后，您可以在模板中这样循环：

 <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>