vuetify treeview箭头标记未正确显示

Question

我正在使用vuetify树视图，它运行正常，但没有显示折叠箭头。这是代码和结果

<template>
    <div>
        <b-row>
            <b-col md="12" class="p-0">
                <v-treeview :items="items"></v-treeview>
            </b-col>
        </b-row>
    </div>
</template>

数据

 data() {
        return {
            items: [
                {
                    'id': 1,
                    'name': 'root',
                    children: [
                        {
                            id: 2,
                            'name': 'child',
                            'children': []
                        }
                    ]
                ]
           }
    }

我还将这些字体附加在index.html中

 <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

这是我得到的结果

当我检查代码时，像这样在按钮内显示$subgroup变量

<button type="button" class="v-icon notranslate v-treeview-node__toggle v-icon--link material-icons theme--light">
  $subgroup
</button>

我该如何解决？

Answer 1

我错过了Vue构造函数中的vuetify: new Vuetify()。只需添加它，它将起作用。