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

    How to get the object of selected option?

    Framework
    2
    2
    1840
    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.
    • Slowaways
      Slowaways last edited by

      In the example below:

      ...
      <q-select color="secondary" v-model="select" :options="listOptions" />
      ...
      select: 'fb',
      listOptions: [
              {
                label: 'Google',
                icon: 'email',
                value: 'goog'
              },
              {
                label: 'Facebook',
                icon: 'chat',
                description: 'Enables communication',
                value: 'fb'
              },
              {
                label: 'Twitter',
                inset: true,
                rightIcon: 'live_help',
                value: 'twtr'
              },
              {
                label: 'Apple Inc.',
                inset: true,
                stamp: '10 min',
                value: 'appl'
              },
              {
                label: 'Oracle',
                description: 'Some Java for today?',
                icon: 'unarchive',
                rightIcon: 'widgets',
                value: 'ora'
              }
            ]
      ...
      

      If the user select Oracle, how to get the other properties like label, icon and description, etc…?
      The selection property should store the full object, not just the value.

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

        Here you go:

        ...
        <q-select color="secondary" v-model="select" :options="listOptions" />
        ...
        select: {
          label: 'Google',
          icon: 'email',
          value: 'goog'
        }.
        listOptions: [
                {
                  label: 'Google',
                  icon: 'email',
                  value: {
                    label: 'Google',
                    icon: 'email',
                    value: 'goog'
                  }
                },
                {
                  label: 'Facebook',
                  icon: 'chat',
                  description: 'Enables communication',
                  value: {
                    label: 'Facebook',
                    icon: 'chat',
                    description: 'Enables communication',
                    value: 'fb'
                  }
                }
              ]
        ...
        
        1 Reply Last reply Reply Quote 0
        • First post
          Last post