Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Event filter QSelect #77

Open
fernandopiovezan1 opened this issue Oct 16, 2020 · 5 comments
Open

Event filter QSelect #77

fernandopiovezan1 opened this issue Oct 16, 2020 · 5 comments

Comments

@fernandopiovezan1
Copy link

Hello, first I would like to thank you and say that this project helps me a lot.
But I am facing a problem that I believe can help me.
I am using vue-form-json-schema in conjunction with Quasar and its components, I am facing a problem with the QSelect component more specifically in the @filter event. this event drops the value entered together with a callback function and an abort function, but I can't pass the callback function at all, as I have tested it in several ways that I could remember but I couldn't get there.
Here are the code snippets I'm using.
QSelect component

{
  component: 'q-select',
  model: 'vehicle_types',
  fieldOptions: {
    on: {
       filter: (value, update) => this.getVehicleTypes(value, update)
      },
    attrs: {
      id: 'vehicle_types',
      name: 'vehicle_types',
    },
    props: {
      label: 'Type',
      outlined: true,
      options: this.vehicleTypesOptions,
      optionValue: 'id',
      optionLabel: 'name',
      multiple: true,
      emitValue: true,
      useChips: true,
      useInput: true,                          
    }                 
  }
},

function getVehicleTypes

methods: {
  getVehicleTypes(val, update) {
    //I'm just giving a console.log () to check if the two values are arriving with should arrive
    console.log(val, update)
  }
},

property vehicleTypesOptions

vehicleTypesOptions: [
  {
      "id": 12,
      "name": "Test 01"
  },
  {
      "id": 17,
      "name": "Test 02"
  },
  {
      "id": 19,
      "name": "Test 03"
  }
]

And there's the link to the quasar documentation where I'm trying to replicate the use of the component
Doc Quasar

I would appreciate it very much if you could help me with this problem.
Thank you

@jarvelov
Copy link
Owner

Hi Fernando,

I see your problem but I don't have time to whip up an example with a solution right now, I'll get back to you later today or tomorrow.

@fernandopiovezan1
Copy link
Author

Hello jarvelov, I managed to reproduce the error in the codesandbox, I believe that this way it will be easier for you to analyze the code.

Follow the code link

Test CodeSandbox

@jarvelov
Copy link
Owner

jarvelov commented Oct 17, 2020

Hi, thanks for the codesandbox reproduction.

I'm on my mobile phone right now but I think I've narrowed down the error and it seems like the wrapper function for the event handlers only receives the first param, which is why the second param is undefined.

It should be a very simple fix, I should be able to publish a new release with a fix as soon as I get home.

@jarvelov
Copy link
Owner

Hello Fernando,

I just released v2.8.7 which includes the patch I talked about yesterday. I forked your codesandbox and I can now see that the update function is passed to the filter function.

Let me know how things work out.

@fernandopiovezan1
Copy link
Author

Hi jarvelov, man it worked perfectly now with this update, thank you very much for the quick solution you presented for this problem.

I updated the sandbox and it is already possible to see the operation, as soon as I finish the function I complement the example and make it more functional for those who know how to be able to serve for other people

Thank you very much

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants