如何循环遍历二维数组以在页面上显示数据？

Question

这个 API 返回一个像这样的二维数组

我想像这样使用这些值在我的页面上迭代和显示

我已查看 vue 文档，但列表呈现不起作用。有什么办法可以用 v-for 或任何其他方法做到这一点吗？

Answer 1

如果我理解正确，请尝试像下面的片段：

new Vue({
  el: '#demo',
  data(){
    return {
      sections: [
        [699962583, 'Sep 17'],
        [12665354, 'Sep 17'],
        [739845240, 'Sep 17']
      ]
    }
  },
  computed: {
    currentPrize(){
      // put logic to get current prize
      return 6543210
    }
  }
})

ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 300px;
}
li, .heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
h1, h3, h5 {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul>
    <h1>Past Prizes</h1>
    <div class="heading">
      <h5>Current prizes</h5><h3>$ {{ currentPrize }}</h3>
    </div>
    <li v-for="(section, index) in sections" :key="index">
      <h5>{{ section[1] }}</h5><span>$ {{ section[0] }}</span>
    </li>
  </ul>
</div>

Answer 2

有两种方法：

一种是将数组转换为对象数组并迭代为 v-for and value.date and value.price in v-for=" value in array"

[{
 date: 'dd//mm/yy',
 price: 3242,
}]

另一种方法是像这样使用数组，数组中的元素应该] 保持不变，其中 value[0] 是你的价格 ad value[1] 是你的日期。

  <div v-for="value in array">
    {{value[0]}}     {{value[1]}}
  </div>

Answer 3

您可以简单地通过循环并销毁 v-for 指令中的子数组来完成。参考下面的示例：

Vue.config.productionTip = false
Vue.config.devtools = false

new Vue({
  el: '#app',
  data() {
    return {
      sections: [
        [699962583, 'Sep 17'],
        [12665354, 'Sep 17'],
        [739845240, 'Sep 17']
      ]
    }
  },
  computed: {
    currentPrize() {
      return this.sections.reduce(function(prev, current){ return prev += current[0]; }, 0);
    }
  }
})

ul {
  list-style-type: none;
  width: 400px;
}

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>Past Prizes</h1>
  <ul>
    <li><span>Current prizes</span><span>${{ currentPrize }}</span></li>
    <li v-for="([prize, date], index) in sections" :key="index">
      <span>{{ date }}</span> <span>${{ prize }}</span>
    </li>
  </ul>
</div>

如何循环遍历二维数组以在页面上显示数据？

How to loop through 2-d array to display data on page?

arrays

vue.js

multidimensional-array

vuejs3

v-for