Блог

Я использую Webpack-Loader для загрузки VueJS в моем проекте Django. Я очень новичок в Vue, и я пытаюсь создать компонент simble, который извлекает данные из серверной части с помощью вызова API и отображает эти данные в Vuetify datatable.

Проблема с моим кодом заключается в том, что во время выполнения запроса в таблице данных ничего не отображается, поэтому таблица отображается, но внутри нее ничего нет.

Мне трудно понять, есть ли проблема с кодом или проблема с моей конфигурацией или моим импортом.

Вот компонент, в котором я выполняю запрос и показываю данные в 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),
})
 

Вот мой 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": ["*"]})

    }
};
 

Используемые версии:

 Vue 2, vuetify@2.3.21
 

Данные представляют собой очень простой массив JSON, содержащий менее 20-30 элементов, он выглядит следующим образом:

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

Запрос выполняется, поскольку 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>
 

Редактировать
Это не приведет к добавлению данных в таблицу, что означает, что проблема, скорее всего, не в моих данных:

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

        })
 

Vuetify не было simple-table в версиях 1.xx. Вместо этого они использовали v-data-table вместо этого, кажется.

Я создал codesandbox для проверки этого:

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

Vuetify 2.3.xx

Vuetify 1.4.xx

Похоже, я импортировал не тем способом. Изменение моего импорта на:

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

полностью устранил проблему. Я до сих пор не понимаю, что меняется, поэтому любые объяснения приветствуются!