Navigation

    Quasar Framework

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

    [SOLVED] Multi Q-Select with an array of objects

    Framework
    5
    11
    2500
    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.
    • C
      coopersamuel last edited by coopersamuel

      I’m trying to set up a multi select input box using chips, pretty much exactly like this codepen: https://codepen.io/anon/pen/qeNOyG?editors=1010

      Except, instead of an array of strings, I have an array of objects like so. Where I want the v-model to keep track of an array of selected objects but only display the name attribute on the chip.

      const options = [{ id: 'abc', name: 'Facebook' }, { id: 'def', name: 'Google' }, { id: 'xyz', name: 'Apple' }, ... ]
      

      This doesn’t seem like a complicated use case, but I’ve pretty much memorized the docs at this point and can’t figure out how to make this work. Any help appreciated.

      patryckx 1 Reply Last reply Reply Quote 0
      • patryckx
        patryckx @coopersamuel last edited by

        @coopersamuel
        The answer you find here: https://quasar.dev/vue-components/select#Example--Custom-label%2C-value-and-disable-props

        You can change the label type and value using:

        • option-value = “id”
        • option-label = “name”

        Also be sure to add:

        • emit-value
        • map-options

        Select example:

        <q-select
                  filled
                  v-model="model"
                  use-input
                  multiple
                  map-options
                  emit-value
                  option-value="id"
                  option-label="name"
                  use-chips
                  stack-label
                  input-debounce="0"
                  label="Simple filter"
                  :options="options"
                  @filter="filterFn"
                  style="width: 250px"
                >
        
        alhidalgodev 1 Reply Last reply Reply Quote 2
        • C
          coopersamuel last edited by

          Hey @patryckx, thanks. I did see this section and I couldn’t get it working right, but I didn’t have emit-value or map-options. Let me give that a shot

          1 Reply Last reply Reply Quote 0
          • C
            coopersamuel last edited by

            @patryckx looks like that works after adding emit-value and map-options, thanks! Although the model only has an array of the ids. Is there anyway to emit the entire option rather than just the id?

            patryckx 1 Reply Last reply Reply Quote 0
            • patryckx
              patryckx @coopersamuel last edited by patryckx

              @coopersamuel Yes removing emit-value and map-options :

              <q-select
                        filled
                        v-model="model"
                        use-input
                        multiple
                        option-value="id"
                        option-label="name"
                        use-chips
                        stack-label
                        input-debounce="0"
                        label="Simple filter"
                        :options="options"
                        @filter="filterFn"
                        style="width: 250px"
                      >
              
              1 Reply Last reply Reply Quote 0
              • C
                coopersamuel last edited by

                @patryckx thanks for the help

                patryckx 1 Reply Last reply Reply Quote 0
                • patryckx
                  patryckx @coopersamuel last edited by

                  @coopersamuel Glad to help you.

                  1 Reply Last reply Reply Quote 0
                  • alhidalgodev
                    alhidalgodev @patryckx last edited by

                    @patryckx said in [SOLVED] Multi Q-Select with an array of objects:

                    @coopersamuel
                    The answer you find here: https://quasar.dev/vue-components/select#Example--Custom-label%2C-value-and-disable-props

                    You can change the label type and value using:

                    • option-value = “id”
                    • option-label = “name”

                    Also be sure to add:

                    • emit-value
                    • map-options

                    Select example:

                    <q-select
                              filled
                              v-model="model"
                              use-input
                              multiple
                              map-options
                              emit-value
                              option-value="id"
                              option-label="name"
                              use-chips
                              stack-label
                              input-debounce="0"
                              label="Simple filter"
                              :options="options"
                              @filter="filterFn"
                              style="width: 250px"
                            >
                    

                    The documentation need that!

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

                      @itslab3rt it’s already there, check API section and examples.

                      1 Reply Last reply Reply Quote 0
                      • T
                        testjust000 last edited by

                        This post is deleted!
                        1 Reply Last reply Reply Quote 0
                        • T
                          testjust000 last edited by

                          This post is deleted!
                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post