AnswerBun.com

Vue - how to show an array of data in a table?

I’m trying to create a component that, on page load, executes a request to my backend, receives some data and shows this data on a vuetify-datatable. I managed to get the data, but my table won’t show it, as it is just empty.

Here is the component:

<template>
  <v-simple-table dark>
    <template v-slot:default>
      <thead>
        <tr>
          <th class="text-left">
            Asset
          </th>
          <th class="text-left">
            Total
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="item in balances"
          :key="item.asset">
          <td>{{ item.asset }}</td>
          <td>{{ item.total }}</td>
        </tr>
      </tbody>
    </template>
  </v-simple-table>
</template>


<script>

var balancesArr = []

fetch('http://127.0.0.1:8000/binance/getbalance')
  .then(response => response.json())
  .then(data => {
    balancesArr = data
    console.log(balancesArr)
  })

export default {
    data () {
      return {
        balances: balancesArr,
      }
    },
}

</script>

Here is main.js:

import Vue from "vue/dist/vue.js";
import Vuex from "vuex";
import storePlugin from "./vuex/vuex_store_as_plugin";
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);
Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;
Vue.use(VueAxios, axios)

new Vue({
  render: h => h(App)
}).$mount('#app')

And the html file:

<div id="app">
        <app></app>
    </div>

I successfully see the data being printed on my console, but nothing shows on the table. What am i doing wrong here?

Stack Overflow Asked by JayK23 on February 21, 2021

2 Answers

2 Answers

Blockquote

You can use life-cycle hook mounted to fetch data on initial page load.

export default {
  data() {
    return {
      balances: [],
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      fetch('http://127.0.0.1:8000/binance/getbalance')
        .then(response => response.json())
        .then(data => {
          this.balances = data
        })
    }
  }
}

you can also use created to fetch data on initial page created is executed before mounted for reference enter link description here e.g.

export default {
  data() {
    return {
      balances: [],
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      fetch('http://127.0.0.1:8000/binance/getbalance')
        .then(response => response.json())
        .then(data => {
          this.balances = data
        })
    }
  }
}

Correct answer by Nilesh Patel on February 21, 2021

You are doing it wrong, you're not using vue correctly:

<script>



export default {
    created() {

      fetch('http://127.0.0.1:8000/binance/getbalance')
       .then(response => response.json())
       .then(data => {
         this.balances = data
        
       })
    },
    data () {
      return {
        balances: [],
      }
    },
}

</script>

Answered by Tomer on February 21, 2021

Add your own answers!

Related Questions

Array to string conversion when using heredoc syntax

2  Asked on December 17, 2020 by icecub

     

Rewrite rules for angular and express server

0  Asked on December 17, 2020 by mirzet-zukic

       

I want to achieve this cursor interaction

1  Asked on December 16, 2020 by abdelhamied-mostafa

       

How to remove nested(child) items in List using Linq?

1  Asked on December 16, 2020 by kamil

       

Pose Detection for squat with count using ML Kit

2  Asked on December 16, 2020 by shweta-chauhan

       

HTMLAudioElement: decoding without throttling

0  Asked on December 16, 2020 by joe-meadows

   

diffrent serial no for each ID in MSSQL

1  Asked on December 16, 2020 by akash-singh

     

How can I generate a number between 1 and 3 in a for loop?

2  Asked on December 16, 2020 by user14050624

   

What does this bitwise operation perform?

3  Asked on December 16, 2020 by sudhip-nashi

       

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.