[vue-devtools] QSelect - _this.model.includes is not a function

[murbanowicz]

Hi,
getting this _this.model.includes is not a function or Cannot read property of 'includes' of null

It happens when I try to access QSelect in Vue-devtools. If I don't - Select is working properly, but if I will try that, it will not work until refresh

t eval (eval at <anonymous> (http://localhost:8080/js/app.js:665:2), <anonymous>:6087:27)
    at Array.map (native)
    at VueComponent.optModel (eval at <anonymous> (http://localhost:8080/js/app.js:665:2), <anonymous>:6086:27)
    at Watcher.get (eval at <anonymous> (http://localhost:8080/js/app.js:629:2), <anonymous>:1652:27)
    at Watcher.evaluate (eval at <anonymous> (http://localhost:8080/js/app.js:629:2), <anonymous>:1760:21)
    at VueComponent.computedGetter [as optModel] (eval at <anonymous> (http://localhost:8080/js/app.js:629:2), <anonymous>:1953:15)
    at chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:3551
    at Array.map (native)
    at m (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:3499)
    at p (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:2596)

[rstoenescu]

1. Shouldn't this be a bug reported to Vue Devtools instead?
2. Please try to be more specific. What do you mean by "accessing QSelect in Vue-devtools"? Do you click on something or...? Please write in full detail what you are doing.

Thanks!

[murbanowicz]

I mean - I try to click on the components tree on QSelect.
This is definitely not an issue of DevTools as it is only in QSelect.

[rstoenescu]

Can't reproduce. Can you provide a repo? Fork app-default-template. Thx.

[rstoenescu]

Extensively tested. Can't reproduce. Maybe a misuse somewhere? Please reopen with a repo where it can be reproduced. Thanks!

[pdanpdan]

I think the problem is that Vue DevTools tries to access the computed properties of the component when it's rendered, and this code throws an error because this.model is not an array when type is list or radio.

optModel () {
  /* Used by multiple selection only */
  return this.options.map(opt => this.model.includes(opt.value))
},

The code should return false when this.model is not array

[rstoenescu]

@pdanpdan Fixed in edge version & available in next Quasar version (v0.13) to be released very soon.

[pdanpdan]

I just checked with the latest edge and the error is still there.
And the optModel computed prop is not changed.
The Vue DevTools show optModel:"(error during evaluation)" as expected

[rstoenescu]

@pdanpdan When type is list or radio, optModel computed property is not, well, computed. So please check again your model.

[pdanpdan]

I know it's not used, but it's defined and inspector tools try to compute it.

[rstoenescu]

@pdanpdan Hmm, Vue devtools tries to show any props and computed props related to the selected component and as a result it forces Vue to compute all "computed" properties. In a non vue-devtool use-case, optModel doesn't gets to be computed because it's not used. I understand now. Patched edge version and this will be available in next Quasar version (v0.13) -- to be released really soon. Thank you so much for pursuing this!!

[pdanpdan]

:) Fixed and working as expected, thank you very much.