Vue表单控件绑定的思考

最近在看vue官网教程的时候碰到一点问题：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

代码很简单，就是用v-for渲染一个动态选项。

问题在于如何理解初始化默认选中以及改变option对应span也发生改变的过程。

首先“Selected: A”很好理解就是span里的表达式绑定了data里的数据实现了初始化，而option有默认值就复杂多了。一开始思路是select标签的v-model也绑定了data里的数据，但并不清楚v-model在select中的具体作用。于是仔细看了下官网的说明，看到这么一段：

就是说v-model相当于绑定当前标签的value值，我们又知道select的value等同当前option的value，那么就不难理解data数据等于给select设置了value值，再加上每个option都用v-bind绑定了对应的value，最终实现option初始选项。

但此时又有另外一个问题，假如元素同时设置了value值和v-model会怎么样呢？

<div id="app">
		<input v-model="msg" value="Bad world" placeholder="Enter sth.">
		<p>Message is: {{ msg }}</p>
	</div>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				msg: "Hello world!"
			}
		})
	</script>

结果很明显标签默认value被v-model给覆盖了，而在官网中可以看到这么一段：

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

大意就是v-model会忽略form表单元素的任何value，checked或selected元素，以js中的data数据为源，于是明了。

到此，改变option对应span内容也改变的过程也就能理清楚了。

当改变option时，v-bind绑定的value发生变化，v-model即select的value也随之修改，然后data里的数值同时改变，最后影响到span表达式里的值。

最后一个疑问就是当去掉option上的v-bind还能否工作。

答案是肯定的，但span里的内容却变成了和option内容一样。稍微一思考变可知道当option改变，option的value因为没设置就成了默认的text值，再通过v-model绑定到data里的数据，最后导致span表达式不能达到预想的结果。另外一个bug就是这种写法初始值会为空，因为data数据绑定到v-model里，而所有option都找不到对应的text值，所以会出现这种现象。