vue: Error when using v-for in IE10

Version

2.5.16 / 2.5.17

Reproduction link

https://jsfiddle.net/plasmaeng/ndmjjkho/1/

Steps to reproduce

Running the code below in IE10 will result in the following error:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="vue.js"></script>
</head>
<body>
<div id="app_test">
	<form>
	<select>
		<option v-for="value in L">{{value}}</option>
	</select>
	</form>
</div>

<script>
	var appTest = new Vue({
	el: '#app_test',
		data: {
			L : [ '1', '2' ,'3']
		}
	});
</script>
</body>
</html>

Here is the error message from IE10.

[Vue warn]: Error compiling template:

<div id="app_test">
	<form>
	<select>
		<option v-for="value in L">{{value}}</option>
	</select>
	</form>
</div>

invalid expression: Syntax error in  Raw expression: v-for="value in L"
invalid v-for alias "" in expression: v-for="value in L"

What is expected?

<option> is generated from 1 to 3.

What is actually happening?

<option> is not generated with error !!!

I have persuaded a senior for a long time to introduce Vue.js. If this problem is solved, we plan to reorganize the site into Vue.js. Please solve the problem.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 26
Comments: 22 (8 by maintainers)

Commits related to this issue

fix(for): use IE compatible regex in v-for regex Closes #7946 — committed to posva/vue by posva 6 years ago
fix(for): use IE compatible regex in v-for regex (#8048) Closes #7946 — committed to vuejs/vue by posva 6 years ago
fix(for): use IE compatible regex in v-for regex (#8048) Closes #7946 — committed to f2009/vue by posva 6 years ago
fix(for): use IE compatible regex in v-for regex (#8048) Closes #7946 — committed to aJean/vue by posva 6 years ago

Most upvoted comments

If you need one of the other fixes in 2.5.16, you can also just patch it yourself.

Search: /([^]*?)\s+(?:in|of)\s+([^]*)/ Replace: /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/

This worked for me, but I decided to revert to 2.5.15 anyway (don’t need any of the other changes in 2.5.16).

symmetriq on May 31, 2018

Using 2.5.15, fixed it for me; I was seeing the problem on 2.5.17 on IE9.

tfnigel on Oct 3, 2018

If in vue 2.5.16 revert this commit (https://github.com/vuejs/vue/commit/71b4b25375fa4bcd929e1161c35cab133e4a7c23) then problem disappears.

schoonc on Apr 3, 2018

Update vue version to v2.5.16 or v2.5.15, but error reporting. Don’t know why?

resolved, Thanks! https://github.com/posva/vue/commit/405c815bb3ae41958ed2e238ca551166799681ab

huanghui8030 on Apr 19, 2018

use “version 2.4.2” is ok

ufozy on Aug 15, 2018

Confirm.

I insert: console.log(render) before line: vnode = render.call(vm._renderProxy, vm.$createElement);

Generated render function in chrome, for example: with(this){return _c('div',{attrs:{"id":"app_test"}},[_c('form',[_c('select',_l((l),function(value){return _c('option',[_v(_s(value))])}))])])}

In ie 10: with(this){return _c('div',{attrs:{"id":"app_test"}},[_c('form',[_c('select',[_c('option',[_v(_s(value))])],2)])])}

P.S. With vue 2.5.15 no problem.

schoonc on Apr 3, 2018

What can I do, if I need to use it in ie9+? Wait for next release version or change to 2.5.15?

weijuer on May 4, 2018

http://sjhannah.com/blog/2011/05/17/javascript-matching-all-characters-including-new-line/

May be replace [^] on [\s\S] ?

schoonc on Apr 3, 2018