[Vuejs]-How to iterate with a v-for loop in vue js?

by

0👍

✅

As Daniel suggested, you need to use the correct notation usage.

If the key in non-numeric, indexing must be via a string; nor can you use hyphens and forward-slashes literally.

Note: I am not sure why you’re using 1655164800000 and 2022-06-14 00:00:00 as keys. Furthermore, CSV data is typically a matrix, not an object array, so the variable name is misleading.

new Vue({
  el: "#app",
  data: {
    csvData: [
      { '1655164800000': 1, '2022-06-14 00:00:00': 1, 'BTC/USD': 1 },
      { '1655164800000': 2, '2022-06-14 00:00:00': 2, 'BTC/USD': 2 },
      { '1655164800000': 3, '2022-06-14 00:00:00': 3, 'BTC/USD': 3 },
    ]
  }
});
.table__content-item { display: inline-block; }

.table__content-item > p { margin: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(data, i) in csvData" :key="i">
    <div class="table__content-item">
      <p class="table__content-text">{{data['1655164800000']}}</p>
    </div>
    <div class="table__content-item">
      <p class="table__content-text">{{data['2022-06-14 00:00:00']}}</p>
    </div>
    <div class="table__content-item">
      <p class="table__content-text">{{data['BTC/USD']}}</p>
    </div>
  </div>
</div>

Leave a comment