No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    5
    854
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      Mickey58 last edited by 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?

      1 Reply Last reply Reply Quote 0
      • M
        Mickey58 last edited by 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?

        1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman last edited by

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

          1 Reply Last reply Reply Quote 0
          • M
            Mickey58 last edited by 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?

            1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman last edited by 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) }".

              1 Reply Last reply Reply Quote 0
              • First post
                Last post