Problemas com VUE JS
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á.Discussão (0)
Carregando comentários...