Problemas com VUE JS

[luiz monteiro 0]

Olá, tudo bem?

 

Estou tentando colocar um evento dropdown em um template.js mas sem sucesso.

 

O script é o seguinte

 

const template = `

<nav id="sidebar">

    <ul class="list-unstyled menu">
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                Home
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
                Analytics
            </a>
        </li>
        <li>
        <a href="#">
            <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
            Ações
        </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                Controles
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                Configurações
            </a>
        </li>
    </ul>

    </nav>

`

export default {
  name: "Sidebar", 
  template,
  delimiters: ["#{", "}#"]
}

 

 

 

 

============Preciso colocar um dropdown na opção Ações, algo assim

 

                <li
                    v-for="item in items">
                    <a :href="item.url"
                       v-if="!item.children">
                        
                    </a>
                    <span
                        v-else
                        v-on:mouseover="mouseover"
                        v-on:mouseleave="mouseleave">
                        {{ item.name }}
                        
                        <ul class=" dropdown"
                           :class="{ isOpen }">
                            <li
                                v-for="child in item.children">
                                <a :href="child.url">
                                    {{ child.name }}
                                </a>
                            </li>
                        </ul>

                    </span>
                </li>

 

var nav = new Vue({
    el: '#nav',
    data: {
        isOpen: false,
        items: [
            {
                url: '#acoes',
                name: 'Ações',
                children: [
                    {
                        url: '#link1',
                        name: 'Opção 1'
                    },
                    {
                        url: '#link2',
                        name: 'Opção 2'
                    },

                    {
                        url: '#link3',
                        name: 'Opção 3'
                    },
                ]
            }
        ]
    },

    methods: {
        mouseover: function () {
            this.isOpen = true;
        },
        mouseleave: function () {
            this.isOpen = false;
        }
    }
});
 

 

 

Quando coloco a programação no sidebar.js, não é exibido nada na tela nem mesmo retorna erro.

 

 

=============No index os imports estão assim

 

    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>

    <script type="module">
      import { createApp } from "vue";
      import Sidebar from "/components/sidebar.js";
      import Welcome from "/components/welcome.js";

      const app = createApp({
          delimiters: ["#{", "}#"],

          components: {
            Welcome,
            Sidebar
          },

          data() {
            return {}
          },

          methods: {
          
          }
        }).mount("#wrapper");

    </script>
  </body>

 

Agradeço desde já.