将路由器链接添加到Vuetify树视图

时间:2019-11-25 04:30:40

标签: vue.js vuejs2 vue-router vuetify.js

我有一个试图在创建菜单时使用的可视化树视图。树视图工作正常,但是我无法使用模板将路由器链接添加到Vuetify树视图。我已经创建了一个Codepen here。我想念什么?

模板:

<div id="app">
  <v-app id="inspire">
    <v-treeview open-all dense :items="items">
      <template v-slot:prepend="{ item }">
          <router-link v-bind:to="`{name:item.to, params:{domain:item.domain}`" >{{item.name}}</router-link>
        </template>   
    </v-treeview>
  </v-app>
</div>

脚本:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      {
        id: 1,
        name: 'Applications :',
        to:'applications',
        domain:'clearcrimson',
        children: [
          { id: 2, name: 'Calendar : app', to:'calendar',
        domain:'clearcrimson'},
          { id: 3, name: 'Chrome : app', to:'chrome',
        domain:'clearcrimson' },
          { id: 4, name: 'Webstorm : app', to:'webstorm',
        domain:'clearcrimson' },
        ],
      },
      {
        id: 5,
        name: 'Documents :',
        children: [
          {
            id: 6,
            name: 'vuetify :',
            children: [
              {
                id: 7,
                name: 'src :',
                children: [
                  { id: 8, name: 'index : ts' },
                  { id: 9, name: 'bootstrap : ts' },
                ],
              },
            ],
          },
          {
            id: 10,
            name: 'material2 :',
            children: [
              {
                id: 11,
                name: 'src :',
                children: [
                  { id: 12, name: 'v-btn : ts' },
                  { id: 13, name: 'v-card : ts' },
                  { id: 14, name: 'v-window : ts' },
                ],
              },
            ],
          },
        ],
      },
      {
        id: 15,
        name: 'Downloads :',
        children: [
          { id: 16, name: 'October : pdf' },
          { id: 17, name: 'November : pdf' },
          { id: 18, name: 'Tutorial : html' },
        ],
      },
      {
        id: 19,
        name: 'Videos :',
        children: [
          {
            id: 20,
            name: 'Tutorials :',
            children: [
              { id: 21, name: 'Basic layouts : mp4' },
              { id: 22, name: 'Advanced techniques : mp4' },
              { id: 23, name: 'All about app : dir' },
            ],
          },
          { id: 24, name: 'Intro : mov' },
          { id: 25, name: 'Conference introduction : avi' },
        ],
      },
    ],
  }),
})

0 个答案:

没有答案