Vue - 如何在表格中显示一组数据？答案

【问题标题】：Vue - how to show an array of data in a table?Vue - 如何在表格中显示一组数据？
【发布时间】：2020-12-21 10:52:22
【问题描述】：

我正在尝试创建一个组件，该组件在页面加载时执行对我的后端的请求，接收一些数据并将这些数据显示在 vuetify-datatable 上。我设法获取了数据，但我的表格不会显示它，因为它只是空的。

这是组件：

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

这里是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')

还有html文件：

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

我成功地在控制台上看到了正在打印的数据，但表格上没有显示任何内容。我在这里做错了什么？

【问题讨论】：

只需将balances 声明为data 中的空数组：data: () => ({ balances: [] }) 。这将使其具有反应性，并且当它发生更改时（在您获取数据之后），模板将收到有关更改的通知。
非常感谢！我试过了，但余额出现未定义错误
您需要比“余额出现未定义错误” 更加具体。这可能意味着太多的事情。
我的意思是错误是余额未定义：未捕获（承诺中）ReferenceError：余额未定义
哦，问题是你在实例之外获取。您必须在安装组件后获取。如果您之前这样做，您可能会在组件安装之前得到响应，因此没有地方放置响应。当然，您可以保存它，然后将其放在mounted() 的组件上。然而，最常见的做法是将fetch() 放在mounted() 中。

标签： javascript vue.js vuetify.js

【解决方案1】：

块引用

您可以使用生命周期挂钩 mounted 在初始页面加载时获取数据。

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

您还可以使用created 获取在安装之前执行的初始页面上的数据以供参考enter link description here 例如

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

【讨论】：

感谢您的回答！我试过了，但桌子还是空的
你能把控制台日志放在this.balances = data行看看你得到数据吗
是的，我尝试添加一个 console.log 但它没有被触发
我更新了我的，这是我得到的：[Vue 警告]：$listeners 是只读的，[Vue 警告]：$attrs 是只读的。我试图了解是什么触发了这些错误

【解决方案2】：

你做错了，你没有正确使用vue：

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

【讨论】：

感谢您的回答。很有可能我用错了，我刚开始使用 Vue，我正试图绕过它。我试过了，但我的桌子还是空的
@Tomer，如您所见，第一个回答并不重要。给出一个完整的答案更为重要。与其说“你做错了”，不如具体解释什么 OP做错了，更重要的是，为什么是错的。发布代码而不解释它比解释问题和您提出的解决方案要少得多。