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

    Detect @click in Option Groups

    Framework
    2
    3
    650
    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.
    • O
      omgwalt last edited by

      I’m a Vue and Quasar beginner.

      How can I detect a click in an Option Group?

      I’m creating a page where the user will enter values that get calculated and combined together.

      What I have written so far allows the user to click checkboxes in an Option Group. As they get checked, the checked items show up in the text field labeled Field, which is a behavior I desired. So far, so good.

      But I also want to hide the Option Group until the user clicks first in the text field called Field. I couldn’t find a way to make that happen.

      Hoping I could figure out a way to reach my goal by experimenting with clicks on the Option Group, I set up the following test to see if I could detect clicks in both the Field and the Option Group.

      I can detect clicks in the Field just fine, but I can’t detect clicks in the Option Group.

      Here’s what I have so far:

      <template>
        <div class="q-pa-md" style="max-width: 400px">
      
          <q-form
            class="q-gutter-md"
          >
              <q-input
              filled
              v-model="field"
              label="Field"
              @click="trigger"
              />
      
              <q-option-group
              v-model="group"
              :options="options"
              color="green"
              type="checkbox"
              @click="trigger"
              />
          </q-form>
      
        </div>
      </template>
      
      <script>
      export default {
          data () {
              return {
                  group: [],
                  options: [
                      {
                      label: 'Weed',
                      value: ' weed'
                      },
                      {
                      label: 'Feed',
                      value: ' feed'
                      },
                      {
                      label: 'Clean',
                      value: ' clean'
                      }
                  ]
              }
          },
      
          computed: {
              field () {
                  return this.group
              }
          },
      
          methods: {
              trigger () {
                  console.log("triggered")
              },
      
              onReset () {
              
              }
          }
      }
      </script>
      

      I’m baffled.

      • Why can’t my simple @click method detect clicks in the Option Group?

      • How can I detect clicks there?

      • And ultimately, how can I hide the Option Group until my text field “Field” gets clicked on?

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

        @omgwalt use @input event on your optgroup. To hide it use a v-if set to true when your input is focused or clicked.

        1 Reply Last reply Reply Quote 0
        • O
          omgwalt last edited by

          Ah yes. Thanks!

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