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

[mrcsmcln]

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]

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 🙂

[mrcsmcln]

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]

That was faster than ever 🚄

[RobertBColton]

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