Javascript 如何逐行打印Vue对象

我有一个Vue应用程序，我试图在自己的表行中显示每个“对象”。但是，我只能让它在一列中显示每个对象，或者我可以让它显示到每个元素都在自己的行中的点（下图）。如何使“0 BTC AUD 14745.3”位于第一行，然后在第二行显示下一个对象“1 ETH AUD 312.14”。我是Vue的新手，不知道是否有人能帮助我

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

等级
名称
价格
{{index}}
从“axios”导入axios
风险限额=20
导出默认值{
名称：“ex”，
数据：（）=>({
硬币：[]
}),
创建（）{
axios.get（）https://min-api.cryptocompare.com/data/top/totalvolfull?limit=“+limit+”&tsym=AUD'）
。然后（响应=>{
对于（变量i=0；i{
此.errors.push（e）
})
}
}

更改将数据推入硬币数组的方式，因为在每次迭代中，您都将三个项目（索引、硬币名称和值）推入数组，但您要做的是推入包含所有这些信息的单个项目（数组或对象）。为了代码清晰，请将

硬币

数组的名称更改为

硬币

。像这样的方法应该会奏效：

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>

{{硬币[0]}
{{硬币[1]}
{{硬币[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>

等级
名称
价格
{{coinItem.index}
{{coinItem.name}
{{coinItem.price}}

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