[Solved] Error in q-select with filtering and adding to menu - aka "To use '()' or not to use '()'" ;-)

Mickey58

I have code that follows the q-select sample code for filtering and adding to menu in https://quasar.dev/vue-components/select#Using-menu-and-filtering - open the Codepen for the “Filtering and adding to menu” example to see the original sample.

My q-select allows the user to define the possible values for a select menu. Once complete, those values are stored in a database and are used later to drive other q-selects that just use those values as menu options (without the ability to add/remove values).

I derived my code from the above sample, with minor differences. Although filtering and selecting from the menu works correctly in my code, an important part of my code does not work:

If the user enters a new value (not existing in the menu) in the input field, after hitting the enter key, that new value is not added to the model and not to the menu. Instead, the console log shows the following errors in that situation: The parameter ‘val’ in the call to my @new-value function is undefined, and there is a subsequent “[Vue warn]: Error in v-on handler: ‘TypeError: Cannot read property ‘length’ of undefined’”. It seems that the @new-value function is called with an undefined parameter val! But that call is not in my direct control, it is triggered and executed by Quasar.

I have a codepen that recreates the error - just enter some text like ‘xyz’ in the q-select input field and hit “enter”: https://codepen.io/mickey58/pen/KKKGQPb?editors=1111.
[Note: Codepen has meanwhile the error corrected - see the appends further down]

If you do the same in the original Quasar example codepen, ‘xyz’ gets correctly added to the model and the menu. In that example code (not in my code) I noticed one strange thing: stringOptions is defined as constant, but it seems it gets modified in the createValue function…

I’m lost on what is causing this error in my own code. It might be related with the the array operations, but I tried already some variants that do not solve the problem. I’m using v-slots for the q-select, due to other reasons that are not obvious from the codepen, and would like to keep those. And I forked a version that does not use v-slots, but the above error persists.

Help needed from some expert - what’s wrong in my code?

Mickey58

Surprisingly, after hours of comparing my code with the sample code, I found the little reason for this blocking error:

I had written:

@new-value="createSelectValue()"`

Simply changing that to:

@new-value="createSelectValue"

removes the error! I changed my Codepen above accordingly.

I’m pretty confused by this. I have lots of

@input="methodABC()"

and

@click="methodXYZ()"

in my code - those seem to work without problems.

So what is the Quasar rule when to use “()” and when not to use “()” in props that want method names as arguments?

metalsadman

@Mickey58 that works if you are not expecting a parameter. without parentheses means the parameters that the event emitted will follow thru.

Mickey58

@metalsadman - well, this is maybe more complicated than I thought. Are you saying:

if the method/function called does not expect parameters, we can safely use “functionX()” or “functionX”, like in most of my @click=“functionX()” examples.
if the method/function called requires parameters, using “functionX()” is dangerous (as in my case above), and “functionX” should be used to ensure that the native event’s parameters are used. Alternatively, “functionX(paramA, paramB, …)” can be used? Do you have an example for this last case?

metalsadman

@Mickey58 it means if you are not wanting to handle any params emitted then you can choose to call your handler with closed+open parentheses, but both works nonetheless, it depends if you want to consume the emitted values (if there’s any, usually just the event itself) in your methods anyway. it’s just in your case you are ought to handle the values the @new-value emitted.

you can still use parentheses there too ie. @new-value="createSelectValue($event)", or deconstruct the params (refer to docs api, for the values emitted by new-value). ie. @new-value="(paramsExample, anotherVal) => { createSelectValue(paramsExample, anotherVal, someCustomParamIfYouWantToPassSomeAdditionalValue) }".