VueJS未在数据表中加载数据

Question

我最近使用Webpack-Loader将VueJS添加到我的Django项目中，现在我正在尝试创建一个Vuetify，该表应该使用API请求显示从后端检索到的一些数据。

这是我的代码：

App.vue

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

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
          console.log(data)
        })
    }
  }
}

</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 Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;
  
new Vue({
    el: '#app',
    render: h => h(App),
})

另外，这是我的vue.config.js

const BundleTracker = require("webpack-bundle-tracker");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;


const pages = {
    'main': {
        entry: './src/main.js',
        chunks: ['chunk-vendors']
    },

}

module.exports = {
    pages: pages,
    filenameHashing: false,
    productionSourceMap: false,
    publicPath: process.env.NODE_ENV === 'production'
        ? 'static/vue'
        : 'http://localhost:8080/',
    outputDir: '../django_vue_mpa/static/vue/',

    chainWebpack: config => {

        config.optimization
            .splitChunks({
                cacheGroups: {
                    moment: {
                        test: /[\\/]node_modules[\\/]moment/,
                        name: "chunk-moment",
                        chunks: "all",
                        priority: 5
                    },
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: "chunk-vendors",
                        chunks: "all",
                        priority: 1
                    },
                },
            });

        Object.keys(pages).forEach(page => {
            config.plugins.delete(`html-${page}`);
            config.plugins.delete(`preload-${page}`);
            config.plugins.delete(`prefetch-${page}`);
        })

        config
            .plugin('BundleTracker')
            .use(BundleTracker, [{filename: '../vue_frontend/webpack-stats.json'}]);

        // Uncomment below to analyze bundle sizes
        // config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin);
        
        config.resolve.alias
            .set('__STATIC__', 'static')

        config.devServer
            .public('http://localhost:8080')
            .host('localhost')
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .headers({"Access-Control-Allow-Origin": ["*"]})

    }
};

我的代码的问题是，在执行请求时，由于console.log()将打印数据，表将不显示任何数据，它只是空的。

我不明白这里有什么问题，但以下是我在控制台中发现的一些错误：

vuetify.js?ce5b:42906 [Vuetify] Multiple instances of Vue detected

[Vue warn]: $attrs is readonly.

found in

---> <VSimpleTable>
       <App> at src/App.vue
         <Root>

[Vue warn]: $listeners is readonly.

found in

---> <VSimpleTable>
       <App> at src/App.vue
         <Root>

Answer 1

您已经创建了函数fetchData，因此您应该使用它。您应该调用它，因此添加以下内容并进行测试：

mounted () {
  fetchData();
}