How to get real-time function values in javascript?

Asked

Viewed 91 times

0

Hello,
I am almost completely Noob in Javascript. I did some projects in Django and decided to expand some knowledge.
One problem I always had was to call functions and get their values in real time: an example would be trying to load a clock in Python by the template syntax. She could get the value only on the first call and to update should also refresh the page.
But my problem today is not Python. I started to make a simple page and ended up using a "media query" to signal the change of window size. The problem is that the value is constantly locked in false or true until the page refreshes. I tried to use the eventListener and discovered that I definitely don’t know JS.
Follows the code: 

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

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

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

</body>

I had some difficulties to write the HTML here, the bars are only by organization. Other than that, just put the CDN of Vue in the head, nor changed title.

On the browser page the result is always True or False, only changing if you refresh the page.
I think I explained as best I could. Thanks in advance.

javascript vue.js

1 answer

0

If you want to use pure Javascript only:

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

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.