0

Olá,
Sou quase que completamente noob no JavaScript. Fiz alguns projetos em django e resolvi ampliar um pouco o conhecimento.
Um problema que eu sempre tive foi chamar funções e obter seu valores em tempo real: um exemplo seria tentar carregar um relógio no Python pela sintaxe do template. Ela conseguia obter o valor somente na primeira chamada e para atualizar também deveria atualizar a página.
Porém meu problema hoje não é Python. Comecei a fazer uma página simples e acabei precisando usar um "media query" para sinalizar a mudança de tamanho da janela. O problema é que o valor fica constantemente travado em false ou true até atualizar a página. Tentei usar o eventListener e descobri que eu definitivamente não sei JS.
Segue o código:

<body>
  <div id="hello">
    {{ query }}
  </div>

  <script>
    var mediaSize = matchMedia('(max-width: 576px)').matches

    new Vue({
      el: '#hello',
      data: {
        query: mediaSize
      }
    })
  </script>

</body>

Eu tive algumas dificuldades para escrever o HTML aqui, as barra são só por organização. Fora isso, só coloque o CDN do Vue no head, nem título mudei.

Na página do navegador o resultado é sempre True ou False, só mudando caso atualize a página.
Acho que eu expliquei o melhor que pude. Desde já obrigado.

1 Resposta 1

0

Se você quiser usar apenas Javascript puro:

  let media;
 window.addEventListener('resize', function() {       
     media = matchMedia('(max-width: 576px)').matches;
     show.innerHTML = media;//'show' é qualquer elemento; só pra mostrar o resultado
 });

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .