Jump to content
luiz monteiro

Problemas com VUE JS

Recommended Posts

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á.

 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Sapinn
      Estou com um problema. Como faço para montar uma URL quando for clicando nos chebox? Exemplo eu possuio varios checkbox e toda vez que eu marcar um o valor dele é adicionando a uma url e essa mesma url será modificada no link.
      Algo como:
      <a href="user/enviar">Mostrar</a>
      <input type="checkbox" value="1">
      <input type="checkbox" value="2" checked>
      <input type="checkbox" value="3" checked>
      <input type="checkbox" value="4">
      <input type="checkbox" value="5">
       
      Vendo os valores marcados a url ficaria
      <a href="user/enviar/2,3">Mostrar</a>
       
      Eu também queria um checkbox para marcar todos e assim adicionar todos os valores a url, agora caso uma desses checkbox forem desmarcados o valor é retirado da url
       
      Eu fiz um script que funciona mas ele está meio bugado, queria saber se alguém tem algum script para fazer isso em javascript puro ou jquery
    • By Wanderson Moreira
      Bom dia,
      alguém pode me ajudar com uma situação?
      estou utilizando um script pra fazer o carregamento assíncrono do site.
      var links = document.querySelectorAll('a'); function handleClick(event) { event.preventDefault(); fetchPage(event.target.href); window.history.pushState(null, null, event.target.href); window.scrollTo(0, 0); } async function fetchPage(url) { document.querySelector('.content'); var pageResponse = await fetch(url); var pageText = await pageResponse.text(); replaceContent(pageText); } function replaceContent(newText) { var newHtml = document.createElement('div'); newHtml.innerHTML = newText; var oldContent = document.querySelector('.content'); var newContent = newHtml.querySelector('.content'); oldContent.innerHTML = newContent.innerHTML; document.title = newHtml.querySelector('title').innerText; } window.addEventListener('popstate', () => { fetchPage(window.location.href); }) links.forEach(link => { link.addEventListener('click', handleClick); }) O problema em questão é que, o conteúdo da pagina que é carregado dentro da div content não funciona corretamente
       
      os scripts em javascript não são executados;
      os links de navegação da pagina não funcionam de maneira assincrona, diferente dos links de navegação do menu
       
       
    • By Jack Oliveira
      Ola pessoal eu gostaria de saber se teria como e se sim, como fazer para pegar lat e lng quando fazer a busca do endereco pelo cep,
      Tentei buscar uns exemplos de como poderia ser feito, porem não obtive resultado que precisava.
       
      o código a baixo ele funciona sem problema, porem so precisaria pegar esta LAT e LNG 
       
       
      //Buscando endereco plo CEP function limpa_formulário_cep() { //Limpa valores do formulário de cep. document.getElementById('rua').value=(""); document.getElementById('bairro').value=(""); document.getElementById('cidade').value=(""); document.getElementById('uf').value=(""); } function meu_callback(conteudo) { if (!("erro" in conteudo)) { //Atualiza os campos com os valores. document.getElementById('rua').value=(conteudo.logradouro); document.getElementById('bairro').value=(conteudo.bairro); document.getElementById('cidade').value=(conteudo.localidade); document.getElementById('uf').value=(conteudo.uf); } //end if. else { //CEP não Encontrado. limpa_formulário_cep(); alert("CEP não encontrado."); } } function pesquisacep(valor) { //Nova variável "cep" somente com dígitos. var cep = valor.replace(/\D/g, ''); //Verifica se campo cep possui valor informado. if (cep != "") { //Expressão regular para validar o CEP. var validacep = /^[0-9]{8}$/; //Valida o formato do CEP. if(validacep.test(cep)) { document.getElementById('cep').value = cep.substring(0,5) +"-" +cep.substring(5); //Preenche os campos com "..." enquanto consulta webservice. document.getElementById('rua').value="..."; document.getElementById('bairro').value="..."; document.getElementById('cidade').value="..."; document.getElementById('uf').value="..."; //Cria um elemento javascript. var script = document.createElement('script'); //Sincroniza com o callback. script.src = 'https://viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback'; //Insere script no documento e carrega o conteúdo. document.body.appendChild(script); } //end if. else { //cep é inválido. limpa_formulário_cep(); alert("Formato de CEP inválido."); } } //end if. else { //cep sem valor, limpa formulário. limpa_formulário_cep(); } }; </script>  
      <?php // Map($Width, $Height, $StringNome, $StringEndereco, $StringCidade) $LAT = '37.86926'; $LNG = '-122.254811'; ?> <script> // gmap for street view panorama = GMaps.createPanorama({ el: '#MapCanvasStreet', lat : <?= $LAT; ?>, lng : <?= $LNG; ?>, }); </script> Desde já fico grato!!
    • By Jack Oliveira
      Ola pessoal montando um limitador a ser selecionado no SELECT OPTION ele ate faz a contagem  certo etc...
       
      porem não estou conseguindo fazer esta contagem continuar pois ja esta cadastrado no banco o maximo permetido
       
      <div class="col-md-6"> <div class="form-group"> <label>Categorias: </label> <select class="form-control select2" name="categorias[]" id="SelecionaQtdOption" multiple="multiple" data-placeholder="<?php echo $txt['todos_os_mods']; ?>"> <option value="">Selecionar Categorias</option> <?php foreach($categorias as $categoria){ if(strpos($Dados['categorias'], $categoria['titulo']) !== false){ ?> <option selected value="<?= $categoria['titulo']; ?>"><?= $categoria['titulo']; ?></option> <?php } else { ?> <option value="<?= $categoria['titulo']; ?>"><?= $categoria['titulo']; ?></option> <?php } } ?> </select> </div> </div> java esta desta forma
      <?php $QtdCategoria = 3; ?> <script type="text/javascript"> $(document).ready(function() { var selecionarOpiton = null; $('#SelecionaQtdOption').change(function(event) { if ($(this).val().length == <?= $QtdCategoria; ?>) { //Limitar Quantidade de categoria a ser selecionanda no select Option $(this).val(selecionarOpiton); } else { selecionarOpiton = $(this).val(); } }); }); </script>  
    • By gersonab
      Bom dia a todos, preciso aplicar duas máscaras em uma janela modal, não estou conseguindo fazer, fora dela as mascaras funcionam.
      <div class="form-group col-md-4"> <label>Data pagamento</label> <input type="text" name="dataval" class="form-control" id="dataapp"> </div> <div class="form-group col-md-4"> <label>Valor</label> <input type="text" name="valpro" class="form-control" id="money"> </div> utilizo este plugin
      <script src="../plugins/input-mask/jquery.inputmask.bundle.min.js"></script> $("#money").inputmask("999,999,999.999"); $("#dataapp").inputmask("99/99/9999"); desde já agradeço qq ajuda
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.