不加载白酒treeData的Vue数据
不加载白酒treeData的Vue数据
提问于 2020-12-09 15:36:30
下面的代码可以很好地处理树视图，因为treeData已经手动定义了。但是我需要通过数据库动态地从服务器应用程序中获取数据。我读了很少的文章，试图使用，但没有成功。有人可以给我建议。我用酒树。
<script>
new Vue({
el: '#app',
data: () => ({
treeData: null,
treeOptions: {
propertyNames: {
text: 'group_Name',
children: 'Child',
state: 'options'
},
dnd: true,
checkbox: true
}
}),
async created() {
const response = await axios.get('/fields_db')
.catch(function (error) {
if (error.response) {
console.log(error.response.data);
}
})
console.log(response.data); // i see the data in the console.
this.treeData = response.data;
})
//app.js
app.get('/fields_db', function(request, response) {
......
response.send(result);
)}
//html page
<body>
<div id='app'>
<tree
:v-if="treeData"
:data="treeData"
:options="treeOptions"
/>
</div>
</body>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-09 15:55:08
使用生命周期挂钩(如created)异步加载异步数据：
new Vue({
...
data: () => ({
treeData: null, // Starts empty
}),
async created() { // async load
const response = await axios.get(...);
this.treeData = response.data;
}
...
})在模板中使用v-if，这样<tree>就不会在数据准备好之前呈现：
<tree
v-if="treeData"
:data="treeData"
:options="treeOptions"
/>(删除init和DOM onload)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65219925
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号