Detect @click in Option Groups

omgwalt

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?

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.

omgwalt

Ah yes. Thanks!