vuetify treeview切换卡片

前言

记录一下自己初学vuetify的一些心得。
在官方文档中虽然有个简单的切换卡片的例子，但对于初学者来说可能过于难懂。于是自己踩过许多坑之后总结了一些关键点，希望对后来的一些初学者有帮助。

代码

template

<template>
    <div>
        <!--    以下属性按行解释
        1、按下调用的方法,将子组件（即列表元素）改变同步到active中
        2、列表物品
        3、可点击并发生相应事件
        4、过渡动画
        5、悬浮特效
        -->
        <v-treeview
                :active.sync="active"
                :items="items"
                activatable
                open-on-click
                transition
                hoverable
        >
        </v-treeview>
        <!--    切换效果-->
        <v-scroll-y-transition mode="out-in">
            <!--        没有选择时显示-->
            <div v-if="!selected">nothing selected</div>
            <!--        显示选择的卡片-->
            <v-card v-else :key="selected.id">
                <v-card-title>{{selected.name}}</v-card-title>
            </v-card>
        </v-scroll-y-transition>
    </div>
</template>

上面写了一个拥有两个列表项的treeview和一个展示框。当没有选择时会显示div里面的内容，一旦选择了某个列表项就会在卡片中显示该选项的name。

script

<script>
    export default {
        data: () => ({
            active: [],
            items:[
                {id:1,name:'card1'},{id:2,name:'card2'}
            ]
        }),

        computed: {
            selected() {
                if (!this.active.length) return undefined

                const id = this.active[0]

                return this.items.find(item => item.id === id)
            },
        }
    }
</script>

active用于储存选中项的信息，在treeview选中后会同步到此处。
items是列表元素
computed计算属性中selected在每次调用都会获取active中与选中项相同id的元素。

在template中通过:key="selected.id"来获取选中项的id并实现切换，关于:key可参考vuefity中tab组件的使用。

效果图