Javascript VueJS未在datatable中加载数据
我最近使用Webpack Loader将VueJS添加到我的Django项目中,现在我正在尝试创建一个Vuetify datatable,它应该显示使用API请求从后端检索到的一些数据 这是我的密码: App.vueJavascript VueJS未在datatable中加载数据,javascript,vue.js,Javascript,Vue.js,我最近使用Webpack Loader将VueJS添加到我的Django项目中,现在我正在尝试创建一个Vuetify datatable,它应该显示使用API请求从后端检索到的一些数据 这是我的密码: App.vue <template> <v-simple-table dark> <template v-slot:default> <thead> <tr> <th cl
<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>
另外,这里是我的vue.config.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),
})
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>
vuetify.js?ce5b:42906[vuetify]检测到多个Vue实例
[Vue warn]:$attrs是只读的。
发现于
--->
在src/App.vue
[Vue warn]:$listeners是只读的。
发现于
--->
在src/App.vue
您已经创建了函数fetchData,因此应该使用它。您应该调用它,因此添加以下内容并进行测试:
mounted () {
fetchData();
}
您已经创建了函数fetchData,所以应该使用它。你应该打电话谢谢你的回答!我已经添加了这个,它在我的组件中