Vue: Model-binding with Select Drop-Down Syncs Disabled Selected Value

[mikebronner]

Current the model binding will obtain the value of a disabled selected item (commonly used for default load state akin to placeholder in input fields). For example:

                    <select v-model="type">
                        <option disabled selected>Type of Change</option>
                        <option>Added</option>
                        <option>Fixed</option>
                        <option>Changed</option>
                        <option>Removed</option>
                    </select>

This will return "Type of Change" when querying this.type, unless the selection is changed. Would it not be more in-line with expectations to not get values of disabled items, even if they are selected?

[Mat-Moo]

Please use the forum for general queries. forum.vuejs.org
I would say that is expected behavior, it's disabled but what if you still want the value?

[mikebronner]

Hi @mat-moo, thanks for your feedback. The reason I thought it is unexpected, is because if you submit the form normally, the post data will not contain the disabled selected value.
I can work around it easily enough, that's not the issue. :)

[silaLi]

I wonder why have no validator in the form.Submit a form that doesn‘t validate really okay?

[mikebronner]

Oh, I do have validation on the form, just not in the example here. :) If you think this isn't an issue, please feel free to close. It just didn't match up with my initial expectations, so I thought I would bring it up. :)

[yyx990803]

If you access the raw value of that select element, you will also get "Type of Change". I think it makes sense to keep current behavior.

[jesseleite]

Took me a while to figure this out, but here's a simple little trick to make this work: https://jsfiddle.net/83q5d713/2/