VueJS-无法从树中获取节点值

时间:2018-11-28 16:12:59

标签: javascript vue.js vuetify.js

由于某种原因,我的树的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>

enter image description here

enter image description here

0 个答案:

没有答案