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.