The <option> value attribute behaves differently

[cnwhy]

Vue.js version

2.1.6

Reproduction Link

http://sandbox.runjs.cn/show/g9bqfzhr

Steps to reproduce

<div id="app">
    <select id="s1">
        <option value="111">111</option>
        <option :value="v">{{v}}</option>
        <option :value="v" v-text="v"></option>
        <option :value="v">111</option>
        <option value="111">{{v}}</option>
    </select>
</div>
<script>
new Vue({
    el: "#app",
    data: {
        v: "111"
    }
})
</script>

What is Expected?

<div id="app">
    <select id="s1">
        <option value="111">111</option>
        <option value="111">111</option>
        <option value="111">111</option>
        <option value="111">111</option>
        <option value="111">111</option>
    </select>
</div>

What is actually happening?

<div id="app">
    <select id="s1">
        <option value="111">111</option>
        <option>111</option>
        <option value="111">111</option>
        <option>111</option>
        <option value="111">111</option>
    </select>
</div>

[defcc]

Maybe we need to force value setting for option? https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/modules/dom-props.js#L38

<option>text</option>

For option with emty value, option.value will be the text, which is the same in this issue.

[yyx990803]

@defcc yeah, just need a special case for 'option'.

[aierui]

meaningful!