Thank you ! My bad

I am using the Tree component with the filter enabled. Once I start typing in the filter, the items in the tree get filtered as I type, however 1 specific item never gets filtered.

Working Example is here

Open the codepen and start typing in the filter textbox, e.g.

• set (pulls up the item containing text setup),
• another one, type - hie (pulls up the item containing text hierarchy).

Likewise it works for all items except 1 - user. Now start typing user - nothing gets filtered though there is an item containing text “user” if you see the array list.

All array items are of the same type, nothing fancy. What am I missing here? Or is this a bug?

Many thanks !!

@metalsadman Thank You for your quick response. Yes, I did what you suggested, and it works. However, I was thinking if I could get reference to the HTML element, by passing a parameter as –

@input="value => { ddlSelectionChanged(value, element.id, $event) }"

which gives me - $event.target…XXX access to the element’s DOM. But i guess with the element.id i will be able to do what I intend to achieve. Thank you once again.

I have a similar scenario, where the q-select components are rendered dynamically at runtime. The page has more than 1 select controls - all of which fire the same @input event. Now, I want to write code depending on which q-select @input event was fired. Since in the @input handler, I only get the new-value, how do I get information of which q-select triggered the event?

My q-select line (executes inside a for loop):

<q-select :options="element.options" v-bind="element.props" v-model="formmodel[element.parentfield][element.field]" square dense outlined @input="ddlSelectionChanged" />

ddlSelectionChanged - method fired on @input change.

@dobbel , Thanks for the pointer. It now works. What I had to change was:

My import strategy was already auto, (though I can turn it off and use required components)

but to get this to work I had to even set
components: [‘QInput’] in the config file.

The configuration file now looks like:

framework: {
      iconSet: 'material-icons',
      lang: 'en-us',
      config: {},
      importStrategy: 'auto',
      components: ['QInput'], // added this
      plugins: []
    },

It should have worked with importStrategy:auto in the first place. Right?

@dobbel , Thanks for your reply.

I am using - importStrategy: ‘auto’, and tried removing the QInput from the component. No luck yet.

@njsteele @gh7531 Thanks for your example. I started checking vue-form-json-schema for a project but couldn’t get it running. The default html UI elements work, but Quasar components dont.

My code is as, what am I missing? : Note: I get an error in the browser console - Unknown custom element: <q-input> - did you register the component correctly.

Failed to mount component: template or render function not defined - where is this to be added?

<template>
  <q-page>
    <DynaFormComponent :model="model" :schema="schema" :ui-schema="uiSchema" />
  </q-page>
</template>

<script>
import DynaFormComponent from 'vue-form-json-schema'
import QInput from 'quasar'

export default {
  name: 'vueform',
  components: {
    DynaFormComponent, QInput
  },
  data () {
    return {
      model: {},
      schema: {
        type: 'object',
        properties: {
          firstName: {
            type: 'string'
          }
        }
      },
      uiSchema: [{
        component: 'q-input',
        model: 'firstName',
        fieldOptions: {
          class: ['form-control'],
          on: ['input'],
          props: {
            type: 'text',
            placeholder: 'Type here'
          }
        }
      }]
    }
  }
}
</script>

I have tried all possible combinations of component: ‘q-input’, component: ‘qinput’ etc. But cannot figure what I am missing.

Any help is appreciated !

Ty.