Приведенный ниже код отлично работает с древовидным представлением, потому что 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.info(error.response.data);
}
})
console.info(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>
Используйте хук жизненного цикла (например, 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
)
когда я устанавливаю treeData в функции инициализации, treeData не загружается.