Vuejs 和 webpack 加载程序 - 无法在数据表上加载数据

Question

I'm using Webpack-Loader to load VueJS in my Django project. I'm very new to Vue, and i'm trying to create a simble component that fetches data from the backend using an API call and shows this data on Vuetify datatable.

The issue with my code is that while the request is executed, nothing is shown on the datatable, so the table shows but nothing is inside of it.

I'm having an hard time understanding if there is a problem with the code or if the problem is with my config or my imports.

Here is the component where i'm performing the request and show the data on the datatable:

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

Here is my 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": ["*"]})

    }
};

Versions used:

Vue 2, vuetify@2.3.21

The data is a very simple JSON array of less than 20-30 elements, it looks like this:

[{"asset": "XYZ", "total": 123}, {"asset": "XYZ2", "total": 456"} ... ]

The request is being executed, since console.log() will print the data, the table won't show any data, it's just empty.

Here are the only errors i found in my console:

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>

EDIT This isn't going to append data to the table, which means that the problem is most likely not my data:

.then(data => {
          this.balances = [{"asset": 1, "total": "1"}, {"asset": 2, "total": 2}, {"asset": 3, "total": 3}]

        })

Answer 1

Vuetify didn't have simple-table in 1.xx versions. Instead they used v-data.table instead it seems.

I've made a codesandbox to test this:

https://codesandbox.io/s/vuetify-data.table-forked-4pxqb?file=/src/components/AppTable.vue

Vuetify 2.3.xx

Vuetify 1.4.xx

Answer 2

It looks like i was importing in the wrong way. Changing my imports to:

import Vue from "vue";
import App from "./App.vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

fixed the problem entirely. I still don't understand what changes, so any kind of explanation is very welcome!