How to apply filters manually when inputs based on v-model?

I could use some help in trying to think through this. I have a series of filters, let's say a couple of field groups of checkboxes and radio buttons. All of the inputs are using v-model, and the filtered results are arrays generated by computed properties, which are based on the data properties that are bound to the inputs via v-model. So when a checkbox or radio button is checked, the displayed (filtered) results change immediately. Pretty straightforward.

But what if I don't want the filters t be applied immediately, and prefer to give the user control over when the filters get applied, say, with a button "Apply Filters"? What's a sensible way to accomplish this?

I've looked into using the lazy modifier for v-model, but Vue doesn't seem to want us to use that with radio inputs. I'm not even sure that this is what I would want. I'm also aware that I could create a radio input component with a custom model option, as in the example below. But again, I'm not quite sure that this is what I need (I have one of these for a form elsewhere in the app, but to tell the truth, I don't fully understand how it works -- but it does).

    model: {
        prop: 'checked',
        event: 'change'
    },
    props: {
        checked: {
            type: [Array, Boolean],
            default: false
        },

piljac1

3 years ago

Best Answer

Level 28

If your current logic works properly, just replace your computed that generates your results by a method bound to the click event of your "Apply Filters" button. In that method, assign the results to a defined data property (which you will need to add). Then, use that data property to display your results. You can set the data property's initial state in the created lifecycle hook or in the actual data property definition itself if possible.

dcranmer

3 years ago

Level 6

Thanks @piljac1 . Late last night I started working in this direction. I still need to tweak some of the rendering logic in my blade template to adjust for this change, but for some reason I got bogged down yesterday thinking about how to do this -- probably because it's relatively simple and straightforward!

Please or to participate in this conversation.