[solved] chips-input no context for :before :after handler



  • I was expecting the handler function to have some context (i.e the component) but apparently not. I can’t access any methods with this and not even console.log is known. Too this.$q is unknown/undefined

    any other prop of this is ignored so no access to even the data of the component.

    Seems without a proper context the handler is useless and there is no way to set a binding for it since I’m just passing it not calling it.



  • yup no context (binding) unless you use v-bind

    I did it like this

       <q-chips-input
       v-model="names"
       v-bind:show="show"
       float-label='Down Arrow for List of Options'
       :before="[
         {
            icon: 'arrow drop down',
            handler() {
              show = !show
            }
          }
        ]"
       @keyup.down="showme"/>
       <q-option-group
       v-show="show"
      color="secondary"
      type="checkbox"
      v-model="value"
      :options="options"
    />
       </div>
    </template>
    
    <script>
    
    // import find from 'lodash.find'
    
    export default {
      data () {
        return {
          show: false
        }
      },