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

v-model not working with <select is="custom-select"> #6066

Closed
mrcsmcln opened this issue Jul 10, 2017 · 4 comments
Closed

v-model not working with <select is="custom-select"> #6066

mrcsmcln opened this issue Jul 10, 2017 · 4 comments
Labels

Comments

@mrcsmcln
Copy link

mrcsmcln commented Jul 10, 2017

Version

2.3.4

Reproduction link

https://jsfiddle.net/b6wa6drg/4/
https://jsfiddle.net/k4sb93uj/1/

Steps to reproduce

See minimal reproduction links. v-model works as expected with <custom select> but not with <select is="custom-select">. The longhand works when the model prop is named something other than value.

What is expected?

v-model should automatically wire up the value prop with its expression.

What is actually happening?

No value is being passed to the value prop. I'm getting the default value undefined, instead.


My only guess is that v-model is binding before the component is mounted.

@posva
Copy link
Member

posva commented Jul 10, 2017

Yeah, it looks like the fact that there's a select makes the v-model directive to bound differently. But the :value + @input isn't working correctly either...
Using component instead of select does fix the issue because the render function generated transforms the v-model directive into a :value + @input pair.
thanks for reporting this 🙂

@posva posva added the bug label Jul 10, 2017
@mrcsmcln
Copy link
Author

mrcsmcln commented Jul 10, 2017

Thanks. I'd also like to add that the same thing is happening for <option> elements:

<option :value="value" is="custom-option"></option>

The value prop is likewise dropped.

@posva
Copy link
Member

posva commented Jul 10, 2017

That was faster than ever 🚄

@RobertBColton
Copy link

RobertBColton commented Jul 25, 2017

I would also like to point out that when I run that fiddle, I get the following in the console window:
[Vue warn]: 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: "val"

This is on Vue 2.3.3

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

No branches or pull requests

3 participants