Блог

Недавно я добавил VueJS в свой проект Django с помощью Webpack-Loader, теперь я пытаюсь создать таблицу данных 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>
 

вы создали функцию fetchData , поэтому вы должны ее использовать. вы должны вызвать его, поэтому добавьте это и протестируйте:

 mounted () {
  fetchData();
}