Error: Avoid mutating a prop directly

[fizerkhan]

I tried to use basic v-select as follows

v-select(v-model="selected", :options="['foo','bar']")

But I am getting following error in the console

Avoid mutating a prop directly since the value will be overwritten whenever 
the parent component re-renders. Instead, use a data or computed property 
based on the prop's value. Prop being mutated: "filterBy" (found in component <v-select>)

Also v-select does not work. When I typed ba, the option bar is not getting filtered.

How do I fix this issue?

[fizerkhan]

This happens because [email protected] does not work with [email protected]. So I switched to [email protected]. Then it works fine.

[erikverbeek]

I'm running into the same error, while 2.4.0 worked fine. Downgrading however removes the new index and 'clearable` features which I think are a great addition.
So I still hope this bug can get fixed.

Edit: I managed to find what caused this bug for me. I was also using vue2-filters, which registers filterBy as a function on every component.

[dmitov]

@erikverbeek

I'm running into the same error, while 2.4.0 worked fine. Downgrading however removes the new index and 'clearable` features which I think are a great addition.
So I still hope this bug can get fixed.

Edit: I managed to find what caused this bug for me. I was also using vue2-filters, which registers filterBy as a function on every component.

You found a way to use vue2-filters with this one?

[erikverbeek]

@dmitov

You found a way to use vue2-filters with this one?

I managed to get it working for my usecase. I was only using the filterBy function from vue2-filters and I was only calling it from inside one of my components methods.

So I got away with just copying the filterBy and contains (which is used by filterBy) functions together with util/index.js into a seperate file and load that instead of the plugin.

This way I have a standalone filterBy function I can call from my scripts.
But this way you lose the ability to use it in your templates.

[akhoury]

sounds like a bug, so issue should be reopened

[akhoury]

maybe not, looks like it was vue2-filters after all

[t0n1zz]

so any update from this one? my project using vue2-filters and now i want to integrate select2 (vue-select) into my project too and getting the same errors... any solution?

[akhoury]

it's not vue-select's fault, it's vue2-filters's, it's adding a method called filterBy on ALL components, including third party components, as a Global Mixin,

see
https://github.com/freearhey/vue2-filters/blob/c776c271901c075b34295a8ecc1f252a0ababe54/src/index.js#L16-L25

and
https://vuejs.org/v2/guide/mixins.html#Global-Mixin

Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components.

I see that @t0n1zz filed an issue there freearhey/vue2-filters#53