ערכי screen שלא מתרעננים בVUE

[chagold]

אני רוצה שיהיו חלקים בדף שיעלמו ויוצגו לפי רוחב המסך (רספונסיביות בלע"ז).
הסטנדרט זה להשתמש עם

@media screen and (max-width: 760px)

אבל כיון שמדובר אני צריך שבלחיצת כפתור אז יוצג החלק שנעלם, אז @media לא מספק אותי.

אז ניסיתי לעשות בVUE (ואז אוכל להוסיף לו תנאים)

v-if="(screen.width > 760)"

הבעיה שהוא לא מתרענן כשהמסך מתקטן גודל.

[yossiz]

הסיבה ש-VUE לא קולט את השינוי היא בגלל ש-VUE רק קולט שינויים בערכים שהוגדרו ב-data בשעת יצירת המופע של Vue. (ממש על דרך הפתרון לשאלה זו).

אני מאמין שאפשר (ורצוי) לטפל בדברים כאלה באמצעות CSS לבד בלי לערב את VUE.

אם תרצה דוקא פתרון באמצעות VUE, זה גם אפשרי. הנה דוגמה.

[chagold]

@yossiz אמר בערכי screen שלא מתרעננים בVUE:

הסיבה ש-VUE לא קולט את השינוי היא בגלל ש-VUE רק קולט שינויים בערכים שהוגדרו ב-data בשעת יצירת המופע של Vue. (ממש על דרך הפתרון לשאלה זו).

ספציפית הגדרתי בעת יצירת המופע.

@yossiz אמר בערכי screen שלא מתרעננים בVUE:

אני מאמין שאפשר (ורצוי) לטפל בדברים כאלה באמצעות CSS לבד בלי לערב את VUE.
אם תרצה דוקא פתרון באמצעות VUE, זה גם אפשרי. הנה דוגמה.

תודה רבה.

[chagold]

@yossiz בשביל האינטליגנציה,
עשית פונקציה בwindow לרענן את הערך בVUE במקום בVUE עצמו.
זה לא היה אמור להיות בVUE אוטומטית, עם כל שינוי במסך?

[yossiz]

@chagold אמר בערכי screen שלא מתרעננים בVUE:

זה לא היה אמור להיות בVUE אוטומטית, עם כל שינוי במסך?

לא. זה בדיוק הנקודה.
איך VUE מזהה שינויים בדאטה?
כי כאשר אתה מאתחל מופע של VUE עם מבנה של דאטה, VUE עובר על כל השדות של הדאטה וממיר את המאפיינים לפונקציות get/set. ולכן, בכל שינוי של ערך נקרא פונקציית ה-set שתפקידו להודיע ל-VUE על שינוי הערך.
אבל איך VUE אמור לזהות שינוי הערך של window.innerWidth שקורה בלי גישה למאפיין אלא על ידי שינוי גודל החלון?
לכן אני מודיע ל-VUE בכל שינוי גודל החלון על שינוי הערך.