由于某种原因,我的树的v模型在单击时似乎没有保存该节点的值。
我正在使用Vuetify来生成树。我在做什么错了?
此外,“打开”似乎也不起作用,这就是为什么默认情况下在页面加载时应该打开一个文件夹的原因。
<template>
<v-layout row wrap>
{{ tree }}
<v-treeview v-model="tree" :open="open" :items="channelsTree" activatable item-key="name" class="treeview">
<template slot="prepend" slot-scope="{ item, open, leaf }">
<v-icon>
{{ open ? 'mdi-folder-open' : 'mdi-folder' }}
</v-icon>
</template>
</v-treeview>
</v-layout>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
channelsTree: [],
tree: [],
open: []
}
},
beforeMount() {
this.getChannelsTree();
},
methods: {
getChannelsTree() {
axios({
method: 'get',
url: 'https://laravel.totalprocessing.com/api/get-channels-tree',
data: { },
config: { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
})
.then(response => {
const keys = ["divisionName", "merchantName", "entityName"];
this.channelsTree = response.data
.reduce((r, o) => {
keys.reduce((t, k) => {
var temp = (t.children = t.children || []).find(p => p.name === o[k]);
if (!temp) {
t.children.push(temp = { name: o[k] });
}
return temp;
}, r);
return r;
}, {})
.children;
console.log(this.channelsTree);
})
.catch(e => {
this.errors.push(e)
})
}
}
}
</script>
<style>
.treeview label {
margin-bottom: 0;
text-align: left;
}
.theme--light.v-treeview .v-treeview-node--active {
padding-right: 15px;
}
</style>