fix: Error using $q.screen.setSizes() quasarframework#2469

angelomedeiros · Aug 26, 2018 · 9da4a4d · 9da4a4d
1 parent 739cb82
commit 9da4a4d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/dev/components/other/screen-plugin.vue b/dev/components/other/screen-plugin.vue
@@ -18,6 +18,14 @@ export default {
     '$q.screen.gt.md' (state) {
       console.log('watcher $q.screen.gt.md', state)
     }
+  },
+  mounted () {
+    this.$q.screen.setSizes({
+      sm: 300,
+      md: 500,
+      lg: 1000,
+      xl: 2000
+    })
   }
 }
 </script>
diff --git a/src/plugins/screen.js b/src/plugins/screen.js
@@ -2,6 +2,8 @@ import { isSSR, fromSSR } from './platform.js'
 import { listenOpts } from '../utils/event.js'
 import debounce from '../utils/debounce.js'
 
+const SIZE_LIST = ['sm', 'md', 'lg', 'xl']
+
 export default {
   width: 0,
 
@@ -59,8 +61,10 @@ export default {
     let updateEvt, updateSizes = {}, updateDebounce
 
     this.setSizes = sizes => {
-      sizes.forEach(name => {
-        updateSizes[name] = sizes[name]
+      SIZE_LIST.forEach(name => {
+        if (sizes[name]) {
+          updateSizes[name] = sizes[name]
+        }
       })
     }
     this.setDebounce = deb => {
@@ -72,13 +76,13 @@ export default {
 
       // if css props available
       if (style.getPropertyValue('--q-size-sm')) {
-        ['sm', 'md', 'lg', 'xl'].forEach(name => {
+        SIZE_LIST.forEach(name => {
           this.sizes[name] = parseInt(style.getPropertyValue(`--q-size-${name}`), 10)
         })
       }
 
       this.setSizes = sizes => {
-        ['sm', 'md', 'lg', 'xl'].forEach(name => {
+        SIZE_LIST.forEach(name => {
           if (sizes[name]) {
             this.sizes[name] = sizes[name]
           }