fix v-model for IE edge cases

Author: yyx990803

changes.md

@@ -289,12 +289,12 @@ computed: {
 
     When used on a `<select>` element, `v-model` will check for an `options` attribute, which should be an keypath/expression that points to an Array to use as its options. The Array can contain plain strings, or contain objects.
 
-    The object can be in the format of `{label:'', value:''}`. This allows you to have the option displayed differently from its underlying value:
+    The object can be in the format of `{text:'', value:''}`. This allows you to have the option text displayed differently from its underlying value:
 
     ``` js
     [
-      { label: 'A', value: 'a' },
-      { label: 'B', value: 'b' }
+      { text: 'A', value: 'a' },
+      { text: 'B', value: 'b' }
     ]
     ```
 
@@ -307,7 +307,7 @@ computed: {
     </select>
     ```
 
-    Alternatively, the object can contain an `options` Array. In this case it will be rendered as an `<optgroup>`:
+    Alternatively, the object can be in the format of `{ label:'', options:[...] }`. In this case it will be rendered as an `<optgroup>`:
 
     ``` js
     [
@@ -321,12 +321,12 @@ computed: {
     ``` html
     <select>
       <optgroup label="A">
-        <option>a</option>
-        <option>b</option>
+        <option value="a">a</option>
+        <option value="b">b</option>
       </optgroup>
       <optgroup label="B">
-        <option>c</option>
-        <option>d</option>
+        <option value="c">c</option>
+        <option value="d">d</option>
       </optgroup>
     </select>
     ```

src/directives/model/select.js

@@ -58,7 +58,8 @@ function initOptions (expression) {
   var self = this
   function optionUpdateWatcher (value) {
     if (_.isArray(value)) {
-      self.el.innerHTML = value.map(formatOption).join('')
+      self.el.innerHTML = ''
+      buildOptions(self.el, value)
       if (self._watcher) {
         self.update(self._watcher.value)
       }
@@ -76,28 +77,32 @@ function initOptions (expression) {
 }
 
 /**
- * Format an option element from the "options" param.
- * An object indicates an <optgroup> which should include:
+ * Build up option elements. IE9 doesn't create options
+ * when setting innerHTML on <select> elements, so we have
+ * to use DOM API here.
  *
- * - label: a string for the label attribute
- * - options: an array of option strings
- *
- * @param {Object|String} op
+ * @param {Element} parent - a <select> or an <optgroup>
+ * @param {Array} options
  */
 
-function formatOption (op) {
-  if (typeof op !== 'string') {
-    if (op.value) {
-      return '<option value="' + op.value + '">' +
-        op.label +
-      '</option>'
-    } else if (op.options) {
-      return '<optgroup label="' + op.label + '">' +
-        op.options.map(formatOption).join('') +
-      '</optgroup>'
+function buildOptions (parent, options) {
+  var op, el
+  for (var i = 0, l = options.length; i < l; i++) {
+    op = options[i]
+    if (!op.options) {
+      el = document.createElement('option')
+      if (typeof op === 'string') {
+        el.text = el.value = op
+      } else {
+        el.text = op.text
+        el.value = op.value
+      }
+    } else {
+      el = document.createElement('optgroup')
+      el.label = op.label
+      buildOptions(el, op.options)
     }
-  } else {
-    return '<option>' + op + '</option>'
+    parent.appendChild(el)
   }
 }
 

test/unit/specs/directives/model_spec.js

@@ -1,13 +1,34 @@
 var _ = require('../../../../src/util')
 var Vue = require('../../../../src/vue')
 
+/**
+ * Mock event helper
+ */
+
 function trigger (target, event, process) {
   var e = document.createEvent('HTMLEvents')
   e.initEvent(event, true, true)
   if (process) process(e)
   target.dispatchEvent(e)
 }
 
+/**
+ * setting <select>'s value in IE9 doesn't work
+ * we have to manually loop through the options
+ */
+
+function updateSelect (el, value) {
+  /* jshint eqeqeq: false */
+  var options = el.options
+  var i = options.length
+  while (i--) {
+    if (options[i].value == value) {
+        options[i].selected = true
+        break
+    }
+  }
+}
+
 if (_.inBrowser) {
   describe('v-model', function () {
 
@@ -112,7 +133,7 @@ if (_.inBrowser) {
       _.nextTick(function () {
         expect(el.firstChild.value).toBe('c')
         expect(el.firstChild.childNodes[2].selected).toBe(true)
-        el.firstChild.value = 'a'
+        updateSelect(el.firstChild, 'a')
         trigger(el.firstChild, 'change')
         expect(vm.test).toBe('a')
         done()
@@ -209,14 +230,14 @@ if (_.inBrowser) {
       })
     })
 
-    it('select + options + label', function () {
+    it('select + options + text', function () {
       var vm = new Vue({
         el: el,
         data: {
           test: 'b',
           opts: [
-            { label: 'A', value: 'a' },
-            { label: 'B', value: 'b' }
+            { text: 'A', value: 'a' },
+            { text: 'B', value: 'b' }
           ]
         },
         template: '<select v-model="test" options="opts"></select>'
@@ -244,10 +265,10 @@ if (_.inBrowser) {
       })
       expect(el.firstChild.innerHTML).toBe(
         '<optgroup label="A">' +
-          '<option>a</option><option>b</option>' +
+          '<option value="a">a</option><option value="b">b</option>' +
         '</optgroup>' +
         '<optgroup label="B">' +
-          '<option>c</option>' +
+          '<option value="c">c</option>' +
         '</optgroup>'
       )
       var opts = el.firstChild.options
@@ -378,7 +399,7 @@ if (_.inBrowser) {
       })
     })
 
-    it('text + compositionevents', function () {
+    it('text + compositionevents', function (done) {
       var vm = new Vue({
         el: el,
         data: {
@@ -404,6 +425,11 @@ if (_.inBrowser) {
       trigger(input2, 'input')
       expect(vm.test).toBe('ccc')
       expect(vm.test2).toBe('ccc')
+      // IE complains about "unspecified error" when calling
+      // setSelectionRange() on an input element that's been
+      // removed from the DOM, so we wait until the
+      // selection range callback has fired to end this test.
+      _.nextTick(done)
     })
 
     it('textarea', function () {